时间戳

首页 > 解决方案 > div 在从顶部以设置的像素数滚动后变为固定，也仅大于设置的窗口宽度，并添加了边框底部

jquery - div 在从顶部以设置的像素数滚动后变为固定，也仅大于设置的窗口宽度，并添加了边框底部

问题描述

我正在使用一个脚本（如下），它允许（导航）div 滚动，但是一旦它到达浏览器的顶部，它就会变得固定。我希望 div 从脚本执行的窗口顶部固定 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>

现在我找到了另一个完全执行此操作的脚本（如下），但是我想组合这两个脚本，以便仅当浏览器窗口宽度>（大于）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>

任何帮助表示赞赏！

标签： jquerycssscrollwidthfixed

解决方案

你可以试试这个。我刚刚将关于宽度的条件语句从第一个脚本添加到第二个脚本。还将黑色边框添加到条件为真时发生的 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>

推荐阅读