How to make float navbars with JS and CSS?


Tags: javascript,css

Problem :

How can I make my lower navbar to stay in the top when I scrolling down? I mean I want to hide only upper navbar? The lower navbar should take place of upper nav.

I tried to affix function:

$('.navbar-lower').affix({
    offset: {top: 50}
});

But my code doesn't work.

Here is my try on jsFiddle: http://jsfiddle.net/hw3gxhhf

How can I fix it?

PS

Also I use jquery.bootstrap-autohidingnavbar.min.js

$("div.navbar-fixed-top").autoHidingNavbar({
    "showOnBottom": false,
    "showOnUpscroll": false
});


Solution :

You can always listen for the scroll event, and check the scrollTop value. Once you've reached the 50px threshold, you change the margin-top value:

window.addEventListener('scroll', function(){
    if (document.body.scrollTop >= 50) {
        $('.navbar-lower').css('margin-top','0px');
    } else {
        $('.navbar-lower').css('margin-top','50px');
    }
})

    CSS Howto..

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    How can I make a DIV cursor and background color change if I hover over it?

    How to change scrollbar css at runtime with javascript?

    How can I reload css styles when change windows width?

    How to vertically align inline-block elements with height set and test with browser tools

    how to combine widget webapp framework with SEO-friendly CSS and JS files

    How to make a button light up on hover with twitter bootstrap

    CSS/JQuery: A scrolling, overlay div and a centered layout - how to get it in a somewhat fixed position?

    CSS - How to break a line only at division borders

    CSS: can't understand how to work with the z-index

    how to make tab bar in jquery mobile?

    how to customize css ellipse for a text string [duplicate]

    How to convert template from table to div

    How to force firefox to use custom CSS for anchor tags that contain “#” or “javascript:”?

    How to create this type of element using XHTML & CSS?

    How to make text with certain id show up after hovering over a certain image

    How to include .css file in smarty template file?

    How to have multiple CSS color transitions on a single text line?

    How to use knockout and i18next for a specfic screen size?

    How to change CSS Class of an image in ListView depending on content in ASP.NET // C#

    How to expand input field to 100% of the parent

    how to align right hand side image on top of text on mobile screen

    How to make an image hover over another?

    How to select col id using jquery to hide via css

    How do I Add border to text in inputfield

    How to make list inside div expand after content in list

    How to do this specifically things in CSS for a table

    How to override CSS? [closed]

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How to make a page look good printed/across multiple browsers