滚动过去时导航栏粘在屏幕顶部答案

【问题标题】：Navbar stick to top of screen when scrolling past滚动过去时导航栏粘在屏幕顶部
【发布时间】：2023-04-04 07:10:01
【问题描述】：

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

虽然有问题。当我改变它的位置值时，设计完全搞砸了。请参阅 www.rowweb.dk/skyline/ - 顺便说一下，我正在使用 Bootstrap。

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

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

有人能解决我的问题吗？

【问题讨论】：

我猜 mainContent 不应该被包裹在 navbar 里面，因为你不能滚动任何固定的内容
当然，哈哈。不敢相信我一直在主演自己对此视而不见。非常感谢！
你可以这样写样式，tbw。 $('.navbar').css({ position: 'fixed', top: '0' });
+1 @A.Wolff 回答
嗯，我似乎无法选择 Wolff 的答案作为正确答案？

标签： jquery css twitter-bootstrap

【解决方案1】：

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

这是一个工作示例：https://codeply.com/p/HAQSABYqPY

相关
Sticky NavBar onScroll?

【讨论】：

我认为这对我来说非常有用！一个问题......在导航到达顶部的精确点，下面的内容会跳到看起来是导航高度的地方。是否有可能避免这种跳跃？

【解决方案2】：

A.沃尔夫是对的。

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

将它移到 .navbar 之外，你应该没问题。

【讨论】：

【解决方案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?

【讨论】：

【解决方案4】：

$(函数() {

// 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(); 
});

});

【讨论】：

请编辑您的帖子，解释为什么您的想法比预期的要好。还请考虑稍微解释一下您的代码。

【解决方案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();

【讨论】：