在網頁上我有多個部分。在這部分內容中，我展示了很多內容塊。這些塊可以通過漂浮在右側的面板進行過濾。使窗口滾動功能只能在一個div中操作

目前，此浮動面板在網頁的所有部分都可見，但我希望它只在我分配的部分中可見。

理想情況下，我會希望它卡在頁面加載部分的右上角。然後，當用戶到達該部分時，需要與用戶保持滾動，直到到達結尾，那麼它需要停留在那裏。

當用戶在頁面上完成並向上滾動時，它需要按照與上述相同的操作順序進行。

什麼需要做

讓它只有部分內可見的（分配一個特定部分）
讓它停留在右上角的頁面加載
不允許繼續到下一個在到達指定部分的末尾之後的部分。

的jsfiddle

HTML：

<div id="section-aaa"></div> 
<div id="section-bbb"> 
    <div id="content"></div> 
    <div id="scroller"> 
    Hello<br> 
    World<br> 
    </div> 
</div> 
<div id="section-aaa"></div>

JS：

(function ($) { 
    $(document).ready(function() { 
    $(window).scroll(function(){ 
     $("#scroller").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow"); 
    }); 
    }); 
})(jQuery);

CSS：

#section-aaa{ 
    position:relative; 
    height:500px; 
    background:red; 
} 
#section-bbb { 
    position:relative; 
    height:1000px; 
    background:grey; 
} 
#content { 
    height:100%; 
} 
#scroller { 
    background-color: #fca9a9; 
    width: 250px; 
    position: absolute; 
    top: 50px; 
    right: 0; 
    z-index: 1; 
}

感謝大家的幫助。 PS：如果你知道一個更好的標題，請將它發佈在評論區。目前我想不出一個更好的。

來源

2017-02-28 purple11111

這裏是一個演示

https://jsfiddle.net/nfuL86hg/2/

(function ($) { 
    $(document).ready(function() { 
    $(window).scroll(function(e){ 
    if(getIsInArea()){ 
    console.log('animate'); 
     $("#scroller").stop().animate({ 
     "marginTop": ($(window).scrollTop()) + "px", 
     "marginLeft":($(window).scrollLeft()) + "px" 
     }, 100); 
    } 

    }); 
    function getIsInArea(){ 

    var w = $(window).scrollTop(); 
     var p = $('#section-bbb').position(); 
     var top = p.top; 
     var down = top+$('#section-bbb').innerHeight(); 
     if(w>=top && w<=down) { 
     return true 
     } 

     return false; 


    } 
    }); 
})(jQuery);

期望去接近你需要它

來源

2017-02-28 20:58:25

我喜歡你的解決方案我接受它作爲答案。非常感謝你。 PS：如果你認爲這個問題很明確，那麼我會非常感激贊成。 – purple11111

我的英語不好，所以我thik，這是非常intiutive –

wihtout動畫另一種解決方案，如果你想更簡單。

檢查它在這JSFiddle。

HTML

<div id="section-aaa"></div> 
<div id="section-bbb"> 
    <div id="content"></div> 
    <div id="scroller"> 
    Hello<br> 
    World<br> 
    </div> 
</div> 
<div id="section-aaa"></div>

CSS

body { 
    padding: 0; 
    margin: 0; 
} 

#section-aaa{ 
    position:relative; 
    height:500px; 
    background:red; 
} 

#section-bbb { 
    position:relative; 
    height:1000px; 
    background:grey; 
} 
#content { 
    height:100%; 
} 
#scroller { 
    background-color: #fca9a9; 
    width: 250px; 
    position: absolute; 
    top: 50px; 
    right: 0; 
    z-index: 1; 
}

的JavaScript

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

     if ($(window).scrollTop() > $('#section-bbb').offset().top) { 
      if ($(window).scrollTop() < $('#section-bbb').offset().top + $('#section-bbb').height() - 100 - $('#scroller').height()){ 
       $('#scroller').css({"position":"fixed", "top":"50px", "bottom":"auto"}); 
      } else { 
       $('#scroller').css({"position":"absolute", "top":"auto", "bottom":"50px"}); 
      } 
     } else { 
      $('#scroller').css({"position":"absolute", "top":"50px", "bottom":""}); 
     } 

    }); 
    }); 
})(jQuery);

在Javascript中它檢查是否滾動頂部的窗口是在section-bbb股利，如果是，它會改變scroller股利的股份有position: fixed。如果窗口的滾動頂部低於section-bbb格，它將scroller格的CSS更改爲具有position: absolute並位於section-bbb格（top:auto,bottom:50px）的底部。如果窗口的滾動頂部高於section-bbb格，它將scroller格的CSS更改爲position: absolute，並位於section-bbb格（top:50px,bottom:auto）的頂部。

來源

2017-02-28 21:28:23 Thanasis

使窗口滾動功能只能在一個div中操作

什麼需要做

的jsfiddle

回答

相關問題