Question

嗨我想在分区可行或在视口中时在每个分区内滚动小按钮。我尝试使用scrollTop()，但滚动所有div

我想创建他们在下载按钮上使用的类似效果

https://www.template.net/web-templates/bootstrap/bootstrap-gallery-template/

这是我的代码

$(document).ready(function () {
  var el = $('.spicbo');
var elpos_original = el.offset().top;
$(window).scroll(function(){
    var elpos = el.offset().top;
    var windowpos = $(window).scrollTop();
    var finaldestination = windowpos;
    if(windowpos<elpos_original) {
        finaldestination = elpos_original;
        el.stop().css({'top':5});
    } else {
        el.stop().animate({'top':finaldestination-elpos_original+10},400);
    }
});

提前谢谢

Answer 1

我根据您在CODEPEN中提供的原型网页中看到的内容创建了一个工作示例。在此示例中，当鼠标指针在container div内移动时，button会随指针一起平滑移动。

<强> HTML

<div class="container">
  <button type="submit">download</button>
</div>

<强> CSS

.container {
   position: relative;
   margin-top: 20px;
   width: 300px;
   height: 100px;
   background: #ccc;
 }

 button {
   position: absolute;
   opacity: 0;
   top: 0;
   right: 0;
   margin: 5px;
   transition: opacity 0.1s ease-in-out;
 }

<强> JS

$(document).ready(function() {

   var currentMousePos = { x: -1, y: -1 };

   $(".container").mousemove(function(event) {
     if ((event.pageY + $("button").outerHeight(true) - 20) < $(".container").height()) {
         currentMousePos.y = event.pageY - 20;
      }

      $("button").css({opacity:1});
      $("button").stop(true,true).animate({
          top: currentMousePos.y
      }, 200)
   });

   $(".container").mouseleave(function() {
     $("button").css({opacity:0});
   });

}）;

在mousemove事件中，我们在container div内部跟踪鼠标指针。如果鼠标指针在div下方，以便将按钮推出div，我们不会更新currentMousePos.y，以便button始终保持在container内。然后我们将opacity更改为1并使用animate相应地移动按钮。在mouseleave事件中，我们将button返回到隐身状态。

Jquery Css将Div Div Down向下移动到另一个Div滚动分区

1 个答案: