獲得一個浮動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時停止

回答

相關問題