Question

在我的网站上，我左侧有一个侧边栏DIV，右侧有一个文本DIV。当他或她向下滚动时，我想让侧边栏跟随读者，所以我对DuckDuckGo进行了一些搜索，发现this然后根据我的需要稍微修改了它：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){

    var $sidebar = $('#sidebar'),
        sidebarOffset = $sidebar.offset(),
        $window = $(window),
        gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
        distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
        footerHeight = $('#footer').outerHeight();

    $window.scroll(function(){
        distance = ($window.scrollTop()) - (sidebarOffset.top - gap);        
        if ( distance > 0 ) {
            $sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
        } else {
            $sidebar.css({'top': '0', 'position': 'relative'});
        }

    })

});    

});//]]>  

</script>

它的工作原理就像我想要的那样。但是，我的网站使用Skeleton framework来处理响应式设计。我设计它时，当它移动到移动设备（水平然后垂直）时，侧边栏从文本的左侧移动到其上方，以便文本DIV可以采用100％宽度。正如您可能想象的那样，当您向下滚动时，此脚本会导致侧边栏覆盖部分文本。

我是jQuery的新手，我正在通过反复试验尽力而为，但我已经放弃了。我需要帮助的是，如果某个DIV具有某个CSS值（即#header-logo为display: none），则使该脚本不执行。

理想情况下，如果用户将浏览器窗口从正常大小调整为移动大小，脚本应在用户调整浏览器大小时检查，而不是网站加载。

我想它应该足以将它包装在一些IF-ELSE声明中，但我现在开始把头发拉出来。既然我不会有太多头发，我需要帮助！

提前多多感谢！

Answer 1

$("#headerLogo").css("display")会为您提供价值。

http://api.jquery.com/css/

我也看到你只希望在调整大小时发生这种情况，所以将它包装在jquery的resize()函数中：

https://api.jquery.com/resize/

Answer 2

此功能将在窗口调整大小时执行，并将检查#header-logo是否可见。

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        // Your code
    }
});

我认为你需要在加载时检查这个，因为你不知道用户是否会从移动视图开始。你可以这样做：

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        // Your code
    }
}).resize();

这将在加载和调整大小时执行。

编辑：如果#header-logo不可见，您可能需要关闭滚动功能。因此，不需要在scroll事件中创建函数，而是需要在外部创建它：

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        var $sidebar = $('#sidebar'),
            sidebarOffset = $sidebar.offset(),
            $window = $(window),
            gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
            distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
            footerHeight = $('#footer').outerHeight();

        function myScroll() {
            distance = ($window.scrollTop()) - (sidebarOffset.top - gap);        
            if ( distance > 0 ) {
                $sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
            } else {
                $sidebar.css({'top': '0', 'position': 'relative'});
            }
        }

        $window.on('scroll', myScroll);
    } else {
        $(window).off('scroll', myScroll);
    }
});

没有测试过，但你明白了。

如果CSS具有特殊价值，请不要执行jQuery脚本

2 个答案: