如果CSS具有特定值，请勿执行jQuery脚本

在我的网站上，我在左侧有一个侧边栏DIV，右侧有一个文本DIV。我想使侧边栏按照读者，因为他或她向下滚动，所以我DuckDuckGo'ed了一下，发现this然后稍微修改我的需求：如果CSS具有特定值，请勿执行jQuery脚本

<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语句，但我开始到现在拉头发，我的头。而且由于无论如何我的头发都没有太多，所以我需要帮助！

非常感谢！

来源

2014-04-13 pglaz

此功能将执行上的窗口大小调整，将检查是否#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不可见，您可能需要关闭滚动功能。因此，而不是创建滚动事件里面的功能，你需要之外创建它：

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

没有测试它，但你的想法。

来源

2014-04-13 19:37:10

谢谢！它的作品非常漂亮:)但是，我刚刚意识到我没有正确解释案件。我需要在调整窗口大小和窗口大小时进行脚本和验证，以涵盖所有可能的场景。我已经将第一行换成了'$（window）.on（'load resize'，function（）{'并且它似乎工作正常。你认为这可能会导致一些问题吗？ – pglaz

我很高兴我可以帮忙。我认为你做的没问题。看看当你加载页面时会发生什么，'＃header-logo'不可见，'myScroll'函数未定义，我不知道是否会显示错误。 –

$("#headerLogo").css("display")会给你价值。

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

我也看到你只希望这种事情发生在调整大小，所以在jQuery的resize()功能把它包：

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

来源

2014-04-13 19:31:42 pennstatephil

如果CSS具有特定值，请勿执行jQuery脚本

回答

相关问题