2014-04-13 41 views
0

在我的网站上,我在左侧有一个侧边栏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-logodisplay: none)。

理想的情况下,脚本应该检查这个当用户改变浏览器,而不是在网站负荷,万一用户调整从正常尺寸大小的移动浏览器窗口。

我想这应该足以把它包在一些if-else语句,但我开始到现在拉头发,我的头。而且由于无论如何我的头发都没有太多,所以我需要帮助!

非常感谢!

回答

0

此功能将执行上的窗口大小调整,将检查是否#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); 
    } 
}); 

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

+0

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

+0

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

相关问题