Div 在从顶部开始滚动到设置的像素数后变得固定，也只大于设置的 window 宽度，加上底部边框

Question

我正在使用允许（导航）div 滚动的脚本（如下），但是一旦它到达浏览器的顶部，它就会固定。我希望 div 固定在距离 window 顶部 50 像素的位置（脚本所做的），但它必须先到达最顶部，然后才能跳下。

我希望它在实际到达顶部之前停止并固定 50 个像素..

<script type="text/javascript">
var fixmeTop = $('.navPages-container').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if ((currentScroll >= fixmeTop) && ($(window).width() > 800))  {
        $('.navPages-container').css({
            position: 'fixed',
            top: '52px',
            height: '50px',
            left: '0'
        });
    } else {
        $('.navPages-container').css({
            position: 'static',
            top: '0'
        });
    }
});
</script>

现在我找到了另一个脚本（如下），但是我想结合这两个脚本，以便只有当浏览器 window 宽度 >（大于）800 时才会出现此功能（请参阅第一个脚本）。

此外，一旦 div 固定，就会出现底部边框： border-bottom: 1px solid #000（我知道不允许使用破折号）。

<script type="text/javascript">
var fixed = false;
$(document).scroll(function() {
    if( $(this).scrollTop() >= 118 ) {
        if( !fixed ) {
            fixed = true;
            $('.navPages-container').css({
               position:'fixed',
               top:50
            });
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('.navPages-container').css({
               position:'static'
            });
    }
}
});
</script>

感谢任何帮助！

Answer 1

你可以试试这个。我刚刚添加了关于从第一个脚本到第二个脚本的宽度的条件语句。还将黑色边框添加到条件为真时出现的 CSS 语句中

<script type="text/javascript">
var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 118 && ($(window).width() > 800) ) {
    if( !fixed ) {
        fixed = true;
        $('.navPages-container').css({
           position:'fixed',
           top:50,

        });
 $('.navPages-container').css('border-bottom','1px solid #000');
    }
} else {
    if( fixed ) {
        fixed = false;
        $('.navPages-container').css({
           position:'static'
        });
 $('.navPages-container').css('border-bottom','0px');
    }
}
});
</script>

Div 在从顶部开始滚动到设置的像素数后变得固定，也只大于设置的 window 宽度，加上底部边框

Div becomes fixed after scroll at set pixel count from top, also only greater than set window width, plus adds border-bottom

css

jquery

scroll

fixed

width