jquery滾動限制。？

在這裏，我試圖讓我的兩個ID的#stop，#stop2固定，即使滾動之後，讓我#stop3滾動，直到它達到#footer一旦達到#footer都#stop，#stop2應停止scrolling.here在我的情況下，兩個#stop，#stop2被滾動在#footer這不應該發生，我不知道我要去哪裏錯了，任何幫助接受。謝謝你提前。jquery滾動限制。？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style> 
    .one{width:100px;border:1px solid #CCC;height:200px;float:left;margin:0px 20px;background:#F00;} 
    .footer{width:100%;height:800px;background:#339;clear:both;} 
    </style> 
    </head> 

    <body> 

    <div class="scroller_anchor"></div> 
    <div id="stop" class="one"></div> 
    <div class="one" id="stop3" style="height:2000px;"> 

    </div> 
    <div id="stop2" class="one"></div> 
    <div class="scroller_anchor1"></div> 
    <div class="footer" id="footer"></div> 
    </body> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    <script> 
    $(window).scroll(function(e) { 

     var scroller_anchor = $(".scroller_anchor").offset().top; 
     var scroller_anchor1 = $(".scroller_anchor1").offset().top; 
     if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed') 
     {  
      $('#stop,#stop2').css({ 
       'position': 'fixed', 
       'top': '0px' 
      }); 
      $('#stop').css({ 
       'left':'4%' 

      }); 
      $('#stop2').css({ 
       'right':'2%' 
      }); 
      $('#stop3').css({ 
       'left':'16.6%' 
      }); 

      $('.scroller_anchor').css('height', '50px'); 
     } 

     else if ($(this).scrollTop() > scroller_anchor1 && $('#stop,#stop2').css('position') != 'relative') 
     { 
      $('#stop,#stop2,#stop3').css({ 
       'position': 'relative', 
       'left':'inherit', 
       'right':'inherit' 

      }); 
     } 
     else if ($(this).scrollTop() < scroller_anchor && $('#stop,#stop2').css('position') != 'relative') 
     { 
      $('.scroller_anchor').css('height', '0px'); 
      $('#stop,#stop2,#stop3').css({ 

       'position': 'relative', 
       'left':'inherit', 
       'right':'inherit' 

      }); 
     } 



    }); 

    </script> 
    </html>

這裏是我的小提琴jsfiddle.net/xPdD7

來源

2014-01-06 3bu1

你可以製作一個JSFiddle嗎？你也可以解釋究竟發生了什麼問題嗎？ – MMM

@MMM請看我編輯的問題。這裏是jsfiddle http://jsfiddle.net/xPdD7/ – 3bu1

對我來說，它仍然不清楚你到底想要達到什麼目的。也許你可以模擬一些小圖像來展示你在滾動時期望發生的事情？ – wf4

我已經修改了你的js代碼用於測試目的一點點，但所有的硬編碼值可以改變您的特定需求：

$(window).scroll(function(e) { 

     var scroller_anchor = $(".scroller_anchor").offset().top; 
     var scroller_anchor1 = $(".scroller_anchor1").offset().top; 
     var footer = $(".footer").offset().top; 
     if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed') 
     {  
      $('#stop,#stop2').css({ 
       'position': 'fixed', 
       'top': '8px' 
      }); 
      $('#stop2').css({ 
       'left':'280px' 
      }); 
      $('#stop3').css({ 
       'left':'140px' 
      });  } 
     if (($(this).scrollTop()+200) > footer ) 
     { 
      $('#stop,#stop2').css({ 
       'position':'absolute', 
       'top':'1800px' 
      }); 
     }  
    });

而且，這裏是一個更新的小提琴：http://jsfiddle.net/xPdD7/8/

這就是你要實現的目標？

來源

2014-01-23 11:40:24 Bobby5193

jquery滾動限制。？

回答

相關問題