需要做什么

Question

在网页上我有多个部分。在其中一节中，我展示了许多内容块。这些块可以通过浮动在右侧的面板进行过滤。

目前，这个浮动面板在网页的所有部分都可见，但我希望它只在我指定的部分中可见。

理想情况下，我希望它能在页面加载的部分的右上角停留。然后当用户到达该部分时，它需要与用户一起滚动直到它到达结束然后它需要留在那里。

当用户在页面上完成并向上滚动时，只需按相反的顺序执行上述操作。

需要做什么

仅在部分中显示（指定特定部分）
让它卡在页面加载的右上角
在到达指定部分的末尾后，禁止继续下一部分。

的jsfiddle

https://jsfiddle.net/nfuL86hg/

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：如果你知道一个更好的标题，请在评论区发布。目前我想不出更好的一个。

Answer 1

here is one demo

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

时，ngRoute不会更改视图

(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);

期待你需要它附近

Answer 2

与动画有关的另一种解决方案，万一你想要它更简单。

在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 div中，如果是，则会将scroller div的css更改为position: fixed。如果窗口的滚动顶部位于section-bbb div下方，则会将scroller div的css更改为position: absolute并位于section-bbb div的底部（top:auto，bottom:50px）。如果窗口的滚动顶部位于section-bbb div之上，则会将scroller div的css更改为position: absolute并位于section-bbb div的顶部（ top:50px，bottom:auto）。

使窗口滚动功能仅在一个div中运行

需要做什么

的jsfiddle

2 个答案: