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的当前顶部位置进行比较。

由于'.content'和'.end'的所有顶级属性都不同，您可以实现所需的功能。

每当它遇到“.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>