JQuery DIV закреплен за другим DIV

Question

Просто новичок здесь.

Я пытаюсь вызвать div, который останется фиксированным и заставит его исчезнуть после достижения другого div.Мой код очень простой, большинство из них css.Мой подход заключался в том, чтобы этот div отображался с помощью scrollTop, а затем я попытался заставить его исчезнуть с помощью дисплея css: 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'. Затем вы можете сравнить с текущей верхней позиции полосы прокрутки.

Поскольку все верхние свойства '.content' и '.end' различны, вы можете реализовать желаемую функцию.

Всякий раз, когда он встречает вершину div '.content', он показывает меню. Но если он встречается с вершиной div '.end', он скрывает меню.

Проверьте мой образец здесь:

//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>