I am using Bootstrap 3 for developing a website. I need to create a navbar which should shrink as the user scrolls down.
Something like - http://osticket.com
How can I create this? I am using Bootstrap's fixed-top example as a starting point - http://getbootstrap.com/examples/navbar-fixed-top/
I need to put a logo onto the left instead of the text and it should reduce its size as the user scrolls down.
Good example of shrinking when scrolling has been documented here: http://www.bootply.com/109943
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
You can simply do it the same way they did it. If you look at the page source, they are simply adding a class to the body element when the page is scrolled. This class is overwriting the display format of the header.
To detect if the page has been scrolled down, they are using a javascript function with events listeners. You can look at the function source code here:
http://osticket.com/sites/all/themes/Porto/js/sticky.js
You have to add java-script for this function. CSS classes have to be updated accordingly to get the shrink on scroll affect. Complete example is shown on this link. http://www.bootply.com/109943#
Related
this is my code:
Link to Codepen
How do I make the website stop scrolling down where the content actually ends?
overflow-y:hidden;
in body element, it won't work because it will not give me scroll the page at all. but I need to scroll it down where my content ends.
How can I do it or prevent it in the most simple way except using js or bootstrap?
The problem happening because every new element goes lower and lower.
Thank you for help !
It happens because many elements has position:relative. Position relative saves place where element should be rendered by default.
You need change html structure and css.
Example: codepen
I want to do something like the 3rd column of Facebook home page from left (where ads appear). When you scroll the page upward, all three columns scroll, but then 3rd column stops scrolling. How to do that? Can it be done with CSS?
I think Facebook does it with a mix of javascript/css
When user is scrolling down, they change position attribute to right col element to fixed.
position: fixed
try this sticyjs puigin
http://stickyjs.com/
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script
In the bootstrap world, this is called affix. Basically, you're listening to the scroll event with javascript and changing the styling (css) based on breakpoints (specific scroll position).
To answer the second question, I don't believe it can be done solely with CSS.
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}
I am working on a webpage with navigation at the top. I was wondering how to make an area of an html page clickable. That way one could click not just on the text in the navigation bar but a general area around the text in order to navigate from page to page. When I keep trying to do it, it generally messes up the divs I already have on the page.
Any help would be appreciated!
Thanks!
If I understood your problem propertly:
Try setup display: block; for your menu text links, + add them padding. Also possible to use width and height
So active link will be not only the text, but also the area around it.
There are only a small set of HTML elements that you can place inside an <a>, and I am guessing none of them is doing the job for you. For example, a div cannot be placed inside an <a>.
In that case, you can use javascript or jQuery to listen for a click on a certain defined area, say a div, on the page and respond to it by changing the address (say by changing window.location.href). This will have the same effect that you are looking for.
Please note though that usability and design ethics demand that a user of your website knows that a certain area is a link and will take you somewhere else before they click it.
I'm assuming by area you mean an entire div? We can use javascript (jQuery) to do this:
$("#mydiv").click(function() {
window.location = 'http://www.google.com'; // redirect here on click
});
<div id="mydiv">
<!-- this area we can click -->
</div>