試圖讓jQuery的浮動DIV喜歡混搭

從這個樣品http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html 試圖讓jQuery的浮動DIV喜歡混搭

唯一的區別是，我想我的右側框中工作。我所做的唯一更改是添加了我的主容器的名稱，該名稱包裝頁面上的所有內容。在這個「主容器」之前，我有一個浮動框在它自己的div中。

<html> 
<head></head> 
<body> 
    <script type="text/javascript"> 

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

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

     if($('#main-container').length > 0){ 

      var bodyY = parseInt($('#main-container').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("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed); 

        if (scrollY > bodyY && !isfixed) { 
         $floatingbox.stop().css({ 
          position: 'fixed', 
          left: '50%', 
          top: 20, 
          marginLeft: 500 

         }); 
        } else if (scrollY < bodyY && isfixed) { 
         $floatingbox.css({ 
          position: 'relative', 
          left: 0, 
          top: 0, 
          marginLeft: originalX 
         }); 
        } 

       } 

      }); 
     } 
    }); 
    </script> 


<div id="floating-box"> 
    <div id="rightMenu"> 
     <ul id="rMenu"> 
      <li><a href="#">Schedule</a></li> 
      <li><a href="#">Seminars/Events</a></li> 
      <li><a href="#">Rates/Promotions</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
    <div id="main-container"> 
     All the page info and divs are in here... 
    </div> 
</body> 
</html>

來源

2010-11-19 pcasa

只是將所有這些左派改爲權利。我認爲這應該做的伎倆？

<html> 
<head></head> 
<body> 
    <script type="text/javascript"> 

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

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

     if($('#main-container').length > 0){ 

      var bodyY = parseInt($('#main-container').offset().top) - 20; 
      var originalX = $floatingbox.css('margin-right'); 

      $(window).scroll(function() { 

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

       if($floatingbox.length > 0){ 

        $floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed); 

        if (scrollY > bodyY && !isfixed) { 
         $floatingbox.stop().css({ 
          position: 'fixed', 
          right: '50%', 
          top: 20, 
          marginRight: 500 

         }); 
        } else if (scrollY < bodyY && isfixed) { 
         $floatingbox.css({ 
          position: 'relative', 
          right: 0, 
          top: 0, 
          marginRight: originalX 
         }); 
        } 

       } 

      }); 
     } 
    }); 
    </script> 


<div id="floating-box"> 
    <div id="rightMenu"> 
     <ul id="rMenu"> 
      <li><a href="#">Schedule</a></li> 
      <li><a href="#">Seminars/Events</a></li> 
      <li><a href="#">Rates/Promotions</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
    <div id="main-container"> 
     All the page info and divs are in here... 
    </div> 
</body> 
</html>

來源

2010-11-19 19:28:53 Blender

希望是那麼簡單。當我滾動時它甚至不會觸發，就像它沒有找到主容器一樣。 – pcasa 2010-11-19 19:32:56

原始代碼是否工作？如果你可以發佈一個完全編碼的示例頁面，這將會容易得多...... – Blender 2010-11-19 19:41:27

大聲笑，我剛剛找到一個示例頁面來處理。只需點擊原始帖子上的編輯按鈕，然後上下滾動（如果帖子足夠長）。整個右側窗格滑過！ – Blender 2010-11-19 19:45:17

試圖讓jQuery的浮動DIV喜歡混搭

回答

相關問題