时间戳

首页 > 解决方案 > 使用 jQuery 从固定到可滚动

javascript - 使用 jQuery 从固定到可滚动

问题描述

我想制作一个最初处于固定位置的div，以便在页面中出现某个div后可以滚动，所以我查看了Jquery的文档并编写了以下代码：

$(window).scroll(function() {
  var posscroll = $(".trigger").offset();
  var pointscroll = posscroll.top - $(window).height();
  if ($(window).scrollTop() >= pointscroll) {
    $(".block").addClass("start-scrolling");
    console.log("point of scroll reached");
  } else {
    if ($(".block").hasClass("start-scrolling")) {
      $(".block").removeClass("start-scrolling");
    }
  }
});
.block {
  position: fixed !important;
  left: 50% !important;
  height: 100px;
  background-color: blue;
}

.start-scrolling {
  position: absolute !important;
}

.trigger {
  height: 50px;
  width: 50px;
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">some content here</div>
other content in between
<div class="trigger">scroll from here</div>

我还做了一个简单的 Jsfiddle

不幸的是，我无法使其正常工作。当我达到滚动高度时，我的 div 会突然消失，而不是在屏幕上向上滚动。

你们能看到我做错了什么吗？

谢谢你！

标签： javascripthtmljquerycss

解决方案

你想要什么并不完全清楚。但我相信这是...

在这种情况下，一旦蓝色块的下边界接触到黄色块与其上边界接触的线，蓝色块就停止固定。

$(window).scroll(function(){
   var posscroll = $(".trigger").offset();
   var pointscroll = posscroll.top-$(".block").height();
   if ($(window).scrollTop() >=pointscroll) { 
      $(".block").addClass("start-scrolling");
     //console.log("point of scroll reached");
   }else
   {
     if($(".block").hasClass( "start-scrolling")) {
       $(".block").removeClass( "start-scrolling");
     }
   }
});

在这种情况下，当黄色块的上边框接触到蓝色块的中心线时，蓝色块就会消失。

$(window).scroll(function(){
   var posscroll = $(".trigger").offset();
   var pointscroll = posscroll.top-($(".block").height())/2;
   if ($(window).scrollTop() >=pointscroll) { 
      $(".block").addClass("start-scrolling");
     //console.log("point of scroll reached");
   }else
   {
     if($(".block").hasClass( "start-scrolling")) {
       $(".block").removeClass( "start-scrolling");
     }
   }
});

推荐阅读