Question

我正在制作一个网站，我希望导航栏在滚动时将其位置更改为“固定”。

但是有一个问题。当我改变其位置值时，设计完全混乱。请参阅www.rowweb.dk/skyline/ - 顺便说一下，我正在使用Bootstrap。

到目前为止，我有以下代码块：

$(window).scroll(function () {
    winHeight = $(window).height();
    if ($(window).scrollTop() > winHeight) {
        $('.navbar').css('position', 'fixed');
        $('.navbar').css('top', '0');
    }
});

有没有人能解决我的问题？

Answer 1

看一下Bootstrap Affix插件：http://getbootstrap.com/javascript/#affix

以下是一个有效的例子：http://bootply.com/97918

相关
Sticky NavBar onScroll?

Answer 2

一个。沃尔夫是对的。

'＃mainContent'位于.navbar中，因此它们都固定在顶部，并覆盖.jumbotron元素，并且不可滚动。

将它移到.navbar外面，你应该没事。

Answer 3

将其应用于无插件的稳定工作。

Here is working jsFiddle.

$(document).ready(function() {
    var windowH = $(window).height();
    var stickToBot = windowH - $('#menu').outerHeight(true);
    //outherHeight(true) will calculate with borders, paddings and margins.
    $('#menu').css({'top': stickToBot + 'px'});

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
});

来源：How to build simple sticky navigation at the page bottum?

Answer 4

$（function（）{

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
    } else {
        $('#sticky_navigation').css({ 'position': 'relative' }); 
    }   
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});

// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){ 
    event.preventDefault(); 
});

}）;

Answer 5

        function FixedTopMenuOnScroll() {
            var winHeight = $(".site-header").height();//any image,logo or header above menu
            winHeight = winHeight - $('.navbar').height();
            function checkMenuOnTop() {
                if ($(window).scrollTop() > winHeight) {
                    $('.navbar').addClass("navbar-fixed-top");
                }
                else {
                    $('.navbar').removeClass("navbar-fixed-top");
                }
            }
            checkMenuOnTop();
            $(window).scroll(function () {
                checkMenuOnTop();
            });
        }
        FixedTopMenuOnScroll();

滚动过去时，导航栏会粘到屏幕顶部

5 个答案: