当向下滚动时，如何设置标题以固定在屏幕上

How to set the header to fix on screen when scroll down?

本文关键字：标题 屏幕 设置 滚动 何设置      更新时间：2023-09-26

这是演示站点:

http://www.kraphicstudio.com/LLR/index.html

如果你向下滚动网站直到横幅消失，你会发现菜单栏

"关于赞助商的活动查询登记捐款"

会粘在屏幕上。

我试过

#menu {
 position: fixed;
}

，但它只能固定元素，而不是固定特定条件下的元素。如何在演示站点中做效果?非常感谢。

现在习惯了现在如果你向下滚动，那么你的菜单就会像这样固定

var oritop = -100;
$(window).scroll(function() {
    var scrollt = $(this).scrollTop();
    var elm = $(".scrollTopWindow");
    if(oritop < 0) {
        oritop= elm.offset().top;
    }
    if(scrollt >= oritop) {
        elm.css({"position": "fixed", "top": 0, "left": 0,"right":0});
    }
    else {
        elm.css("position", "static");
    }
});
body{height:2000px}
.scrollTopWindow {
    background-color: red;
    height: 40px;
    color: white;
    padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>
<div class = "scrollTopWindow">
    Scroll top window and fix me !
</div>

源代码为

With Scroll你可以检查，当窗口达到一个特定的高度后，将fixed添加到你的header

    $(window).scroll(function () {
       var height = 30;
       var selector = $('header');
        if($(this).scrollTop() >= height){
            selector .addClass('fixedHead');    
        }else{
            selector .removeClass('fixedHead');
        }
    });


    .fixedHead{
        position: fixed;
        width: 100%;
        top: -30px;
        left: 0;
    }

我想这可能行得通

您可以查看下面的链接。

http://jsfiddle.net/elcreador419/xJXZr/

    var navPos = $('#nav').offset().top;
$(window).scroll(function () {
    var fixIT = $(this).scrollTop() >= navPos;
    var setPos = fixIT ? 'fixed' : 'relative';
    var logoSH = fixIT ? 'show' : 'hide';
    $('#nav').css({
        position: setPos
    });
    $('#mini-logo')[logoSH](300);
});
相关文章：