获得一个浮动div在到达另一个div时停止

我在页面上滚动的侧栏上有一个浮动div。有没有办法添加代码，使其在到达页脚时停止？在行动获得一个浮动div在到达另一个div时停止

见代码：http://openbayou.staging.wpengine.com

用于浮动 div

jQuery代码：

$j=jQuery.noConflict(); 

$j(document).ready(function($) { 

//this is the floating content 
var $floatingbox = $('#one'); 

if($('#primary').length > 0){ 

    var bodyY = parseInt($('#primary').offset().top) - 20; 
    var originalX = $floatingbox.css('margin-left'); 

    $(window).scroll(function() { 

     var scrollY = $(window).scrollTop(); 
     var isfixed = $floatingbox.css('position') == 'fixed'; 

     if($floatingbox.length > 0){ 

      $floatingbox.html(); 

      if (scrollY > 1561 && !isfixed) { 
       $floatingbox.stop().css({ 
        position: 'fixed', 
        top: 10, 
       }); 
      } else if (scrollY < 1561 && isfixed) { 
       $floatingbox.css({ 
        position: 'relative', 
        top: 0, 
       }); 
      } 

     } 

    }); 
} 
});

来源

2013-04-24 Gregory Schultz

这不是一个WordPress的问题，因此是脱离主题。 – vancoder 2013-04-24 22:11:59

更新：找到了解决我的问题。

$(function() { 
    var msie6 = $.browser == 'msie' && $.browser.version < 7; 
    if (!msie6) { 
     var top = $('#one').offset().top; 
     $(window).scroll(function (event) { 
      var y = $(this).scrollTop() + 20; 
      if (y >= top) { 
       $('#one').addClass('fixed'); 
      } 
      else { 
       $('#one').removeClass('fixed'); 
      } 

      // don't overlap the footer - pull sidebar up using a negative margin 
      footertotop = ($('#footer').position().top); 
      scrolltop = $(document).scrollTop() + 760; 
      difference = scrolltop - footertotop; 
      if (scrolltop > footertotop) { 
       $('#one').css('margin-top', 0 - difference); 
      } 

      else { 
       $('#one').css('margin-top', 0); 
      } 
     }); 
    } 
});

这样做是它前躯停止，我可以配置停止点。

我感谢所有帮助解决我的问题！

来源

2013-04-26 01:11:32

为什么不只是设置的z-索引后面的侧边栏的z-index页脚？

编辑：我不喜欢这样的结果让我去，并取得了jQuery的这个工作你想要的方式...

尝试一下本作的滚动功能：

$(window).scroll(function() { 
floatingbox = $("#one"); 
      if(floatingbox.length > 0){ 
       //get our current scroll position 
       var scrollY = $(window).scrollTop(); 
       //get the position of the tag cloud relative to the document 
       var contentY = ($("#sidebar .sidebar-tag-cloud").offset().top + $("#sidebar .sidebar-tag-cloud").outerHeight(false)); 
       //calculate the largest possible top margin size before it starts to overlap the footer 
       var lastY = $("#footer").offset().top - $("#one").outerHeight(false); 
       //check if our scroll location is past the bottom of the tag cloud 
       if (scrollY > contentY) 
       { 
        //check if the current top position is less than the maximum position 
        if(floatingbox.offset().top<lastY) 
        { 
         //keep scrolling 
         floatingbox.stop().animate({"marginTop":scrollY-contentY}); 
        }else 
        { 
         //check if we have scrolled back up and have a space at the top 
         if(scrollY<floatingbox.offset().top) 
         { 
          floatingbox.stop().animate({"marginTop":scrollY-contentY}); 
         }else 
         { 
          // hard set to the maximum position 
          floatingbox.stop().css({"marginTop":lastY-contentY}); 
         } 
        } 
       }    
      } 
     });

我还通过获取标签云底部的位置并使用它来代替硬编码数字，使它更具动态性。

来源

2013-04-25 00:42:28 nullSharp

没有工作。请记住，我不熟悉jQuery。有没有办法添加一些东西，以保持div的某个像素时，用户到达页面的结尾？ – 2013-04-25 10:13:41

嗯，如果你用这段代码替换你的滚动代码它是做什么的？那就是说什么没有用。 – nullSharp 2013-04-25 11:52:05

什么都没有。框不滚动和CSS不会改变。我已将上面的代码添加到网站中，以便您可以看到。 – 2013-04-25 18:00:46

好吧，看完你最新的jsfiddle。我已修改该代码以与您的代码一起工作。 http://jsfiddle.net/Tgm6Y/4430/这不会有动画滞后，应该适合你。

$('#one').followTo('#two','#pointFive');

刚刚更换#footer的和#pointFive #two与“#sidebar .sidebar标签云”，这应该在你的代码工作。

来源

2013-04-26 00:23:30 nullSharp

获得一个浮动div在到达另一个div时停止

回答

相关问题