Jquery div 固定到其他 div

Question

我只是个新手。

我正在尝试触发一个 div，它会保持固定并在到达另一个 div 后消失。我的代码很基础，大部分都是css。我的方法是通过 scrollTop 使这个 div 出现，然后我试图通过 css display:none.

让它消失

我不知道这是否正确。刚开始接触JS，知识还不多

顺便说一句，抱歉我的英语不好。

这是代码：

var fixmeTop = $('.iconbar').offset().top;
var end = $(".end").offset().bottom;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.iconbar').css({
            position: 'fixed',
            top: "200",
            left: 'auto',
            right:'8px'
        });
    } else if (currentScroll >= end) {
                $(".iconbar)".css({
                    display: "none"
                }))
    } else {
        $('.iconbar').css({
        position: "static",
        });
    }
});

.content {
  height: 2000px;
}
.iconbar {
  display: block;
  position: static;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.iconbar a {
  display: block;
  text-align: right;
  padding: 10px;
  transition: all 0.3s ease;
  color: #70bcaf;
  font-size: 20px;
}

.iconbar a:hover {
    display: block;
    background-color: #70bcaf;
    color: white;
}

.facebook {
  background: #ffffff;
  margin:3px;
}

.twitter {
  background: #ffffff;
  margin:3px;
}

.google {
  background: #ffffff;
  margin:3px;
}

.linkedin {
  background: #ffffff;
  margin:3px;
}

.mail {
  background: #ffffff;
  margin:3px;
}
.whatsapp {
  background: #ffffff;
  margin:3px;
}
.more {
  background: #ffffff;
  margin:3px;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="iconbar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> 
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> 
  <a href="#" class="google"><i class="fa fa-google"></i></a> 
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="mail"><i class="fa fa-envelope"></i></a> 
  <a href="#" class="whatsapp"><i class="fa fa-whatsapp"></i></a>
  <a href="#" class="more"><i class="fa fa-share-alt"></i></a>
</div>
<div class="content"></div>
<div class="end"></div>
<div class="content">
</div>

Answer 1

您可以获得“.content”和“.end”的所有顶级属性。然后就可以和当前Scrollbar的top位置进行比较了。

由于'.content'和'.end'的top属性都是不同的，所以你可以实现你想要的功能。

只要遇到“.content”的顶部div，就会显示菜单。但是如果它遇到'.end'的顶部div，它会隐藏菜单。

在这里检查我的示例：

//var fixmeTop = $('.iconbar').offset().top;
//var end = $(".end").offset().bottom;
$(window).scroll(function(event) {
    var currentScroll = $(window).scrollTop();

    $('.content').each(function(index){
        var contentTop = $(this).position().top;
        var isPassed = contentTop - currentScroll;

//        console.log('c: '+currentScroll + ' '+ contentTop + ' ' + isPassed);

        if(isPassed <= 30 || isPassed > -30){
//            console.log('show');
            $('.iconbar').css('position', 'fixed');
            $('.iconbar a').css('display', 'block');
        }
    });

    $('.end').each(function(index){
        var endTop = $(this).position().top;
        var isPassed = endTop - currentScroll;
//        console.log('e: '+currentScroll + ' '+ endTop + ' ' + isPassed);

        if(isPassed <= 30){
//            console.log('hide');
            $('.iconbar').css('position', 'none');
            $('.iconbar a').css('display', 'none');
      }
    });
//    console.log('==============');
});

.content {
  height: 2000px;
}
.iconbar {
  display: block;
  position: static;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.iconbar a {
  display: none;
  text-align: right;
  padding: 10px;
  transition: all 0.3s ease;
  color: #70bcaf;
  font-size: 20px;
}

.iconbar a:hover {
    display: block;
    background-color: #70bcaf;
    color: white;
}

.facebook {
  background: #ffffff;
  margin:3px;
}

.twitter {
  background: #ffffff;
  margin:3px;
}

.google {
  background: #ffffff;
  margin:3px;
}

.linkedin {
  background: #ffffff;
  margin:3px;
}

.mail {
  background: #ffffff;
  margin:3px;
}
.whatsapp {
  background: #ffffff;
  margin:3px;
}
.more {
  background: #ffffff;
  margin:3px;
}

.content {
  margin-left: 75px;
  font-size: 30px;

  height: 500px;
  width: 100%;
  background:red;
}

.end{
  height: 200px;
  width: 100%;
  background:green;
}

.iconbar{
  display: none,
  position: fixed,
  top: 200px,
  left: auto,
  right:8px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="iconbar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="mail"><i class="fa fa-envelope"></i></a>
  <a href="#" class="whatsapp"><i class="fa fa-whatsapp"></i></a>
  <a href="#" class="more"><i class="fa fa-share-alt"></i></a>
</div>
<div class="content"></div>
<div class="end"></div>
<div class="content">
</div>

Jquery div 固定到其他 div

Jquery div fixed up to other div

jquery

scroll

scrolltop