Question

我做了一个小提琴here

navlist = [];
$("#navlist a").each(function(i) {
  var thisLink = $(this);
  var thisId = thisLink.attr('href');
  var thisTarget = $(thisId);
  navlist.push({
    'anchor': thisLink,
    'id': thisId,
    'target': thisTarget
  });
  thisLink.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: thisTarget.offset().top
    }, 800);
  });
});
$(window).on('scroll resize', function(e) {
  $.each(navlist, function(e, elem) {
    var placement = elem.target[0].getBoundingClientRect();
    if (placement.top < window.innerHeight && placement.bottom > 0) {
      history.pushState({}, '', elem.id);
      console.log('Hash: ' + elem.id);
      return false; /* Exit $.each loop */
    };
  });
});

//show phone triggering at height 150px from 1st DIV
$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $("#first").height();
    var viewPortSize = $(window).height();

    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if($(window).scrollTop() >= triggerHeight) {
        $('.phone').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

#first {
  height: 100vh;
  background: #F06A59;
}

#second {
  height: 100vh;
  background: #FB3E47;
}

#third {
  height: 100vh;
  background: #FFA306;
}

#fourth {
  height: 100vh;
  background: #528AFC;
}

#fifth {
  height: 100vh;
  background: #52FC6C;
}

#fifth {
  height: 100vh;
  background: #52FC6C;
}

#sixth {
  height: 100vh;
  background: #CFDA25;
}

.header {
  width: 100%;
  position: absolute;
  padding: 20px
}

.nav {
  position: fixed;
  width: 100%;
}

.nav ul {
  list-style: none;
}

.nav ul li {
  display: inline;
  font-size: 18px;
  margin-bottom: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.nav ul li a {
  text-decoration: none;
  color: #000;
  padding: 10px 5px 10px 70px;
  font-family: agency fb;
  font-weight: bold;
  font-size: 36px;
  text-shadow: 1px 2px 4px #000000;
}

.nav ul li a:hover {
  color: #fff;
  text-shadow: 1px 6px 4px #000000;
  transition: all 0.4s ease-in-out;
}

.nav-active {
  color: red !important;
}

.phone {
  left: 43%;
  top: 28%;
  position: fixed;
  background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
  background-size: 250px 500px;
  padding: 70px 25px 75px 25px;
  display: block;
  visibility: hidden;
}

.phone-inner {
  width: 200px;
  height: 355px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <div class="nav">
    <ul id="navlist">
      <li><a href="#first" id="nav1">Home</a></li>
      <li><a href="#second" id="nav2">Features</a></li>
      <li><a href="#third" id="nav3">About Us</a></li>
    </ul>
  </div>
  <div class="phone" align="center">
    <div class="phone-inner"></div>
  </div>
</div>

<section>
  <div class="main" id="first">
    <video width="100%" autoplay="" loop="" muted>
      <source src="vid/vids.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section>
  <div class="main" id="second"> </div>
</section>
<section>
  <div class="main" id="third"></div>
</section>

在那里你可以看到，当我向下滚动时，手机显示触发高度150px。这就是我想要的，直到这里。但当我向后滚动到第一个div时，它应该淡出并隐藏。我试着做但却失败了。我想以一种未在第一个和最后一个div中显示的方式（它应该仅显示在中间div中）。比方说，我有五个部门。它应该现在开始显示，并且应该可见到第4个div。一旦第5个div进入视口，它应该淡出并隐藏。同样，当我滚动回到第一个div时，它应该淡出并再次隐藏，并在向上滚动并向下滚动时重复该过程。

请帮助我开发。

Answer 1

在显示手机后的代码中，您正在使用此$(this).off('scroll')取消绑定滚动

这可能对您有所帮助

$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("#first").height();
var viewPortSize = $(window).height();
 var lastDivHeight = $("#third").height()+viewPortSize;

var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
console.log(lastDivHeight);

if($(window).scrollTop() >= triggerHeight && $(window).scrollTop() <= lastDivHeight) {
    $('.phone').css('visibility', 'visible').fadeIn();
}
else{
    $('.phone').css('visibility', 'hidden').fadeOut();
}

}）;

Answer 2

如果它与else

不匹配，您可以使用if语句隐藏它

if ($(window).scrollTop() >= triggerHeight) {
  $('.phone').css('visibility', 'visible').show().fadeIn();
} else {
  $('.phone').css('visibility', 'hidden').fadeOut();
}

同时删除$(this).off('scroll');然后它应该正常工作

注意我还更改了.phone课程

.phone {
  left: 43%;
  top: 28%;
  position: fixed;
  background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
  background-size: 250px 500px;
  padding: 70px 25px 75px 25px;
  display: none; // <--- changed
  //visibility : hidden // <--- removed
}

更新更新，并回答有关上一个div的问题

var DivTop = $("#fifth").position().top;
if ($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop)

工作示例。

navlist = [];
$("#navlist a").each(function(i) {
  var thisLink = $(this);
  var thisId = thisLink.attr('href');
  var thisTarget = $(thisId);
  navlist.push({
    'anchor': thisLink,
    'id': thisId,
    'target': thisTarget
  });
  thisLink.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: thisTarget.offset().top
    }, 800);
  });
});
$(window).on('scroll resize', function(e) {
  $.each(navlist, function(e, elem) {
    var placement = elem.target[0].getBoundingClientRect();
    if (placement.top < window.innerHeight && placement.bottom > 0) {
      history.pushState({}, '', elem.id);
      return false; /* Exit $.each loop */
    };
  });
});



var mainTops = [];
$('.main').each(function() {
  mainTops.push($(this).position().top)
});



//show phone triggering at height 150px from 1st DIV
$(window).scroll(function() {
  var topDivHeight = $("#first").height();
  var DivTop = $("#fifth").position().top;
  var viewPortSize = $(window).height();

  var triggerAt = 150;
  var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
  
  var count = 0;
  var number = jQuery.grep(mainTops, function(n, i) {
    if (n <= $(window).scrollTop()) 
    {
      count++;
    }
  });
   $('.nav ul li a').css("color", "#000");
   $('.nav ul li a#nav'+count ).css("color", "#fff");
  if ($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop) {
    $('.phone').css('visibility', 'visible').show().fadeIn();
  } else {
    $('.phone').css('visibility', 'hidden').fadeOut();
  }

});

*{
margin:0;
padding:0}

#first {
  height: 100vh;
  background: #F06A59;
}
#second {
  height: 100vh;
  background: #FB3E47;
}
#third {
  height: 100vh;
  background: #FFA306;
}
#fourth {
  height: 100vh;
  background: #528AFC;
}
#fifth {
  height: 100vh;
  background: #52FC6C;
}
#fifth {
  height: 100vh;
  background: #52FC6C;
}
#sixth {
  height: 100vh;
  background: #CFDA25;
}
.header {
  width: 100%;
  position: absolute;
  padding: 20px
}
.nav {
  position: fixed;
  width: 100%;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  display: inline;
  font-size: 18px;
  margin-bottom: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
  text-decoration: none;
  color: #000;
  padding: 10px 5px 10px 70px;
  font-family: agency fb;
  font-weight: bold;
  font-size: 36px;
  text-shadow: 1px 2px 4px #000000;
}
.nav ul li:first-of-type a{
  color: #fff;
}
.nav ul li a:hover {
  color: #fff;
  text-shadow: 1px 6px 4px #000000;
  transition: all 0.4s ease-in-out;
}
.nav-active {
  color: red !important;
}
.phone {
  left: 43%;
  top: 28%;
  position: fixed;
  background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
  background-size: 250px 500px;
  padding: 70px 25px 75px 25px;
  display: none;
}
.phone-inner {
  width: 200px;
  height: 355px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <div class="nav">
    <ul id="navlist">
      <li><a href="#first" id="nav1">Home</a>
      </li>
      <li><a href="#second" id="nav2">Features</a>
      </li>
      <li><a href="#third" id="nav3">About Us</a>
      </li>
      <li><a href="#fourth" id="nav4">fourth</a>
      </li>
      <li><a href="#fifth" id="nav5">fifth</a>
      </li>
    </ul>
  </div>
  <div class="phone" align="center">
    <div class="phone-inner"></div>
  </div>
</div>

<section>
  <div class="main" id="first">
    <video width="100%" autoplay="" loop="" muted>
      <source src="vid/vids.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section>
  <div class="main" id="second"></div>
</section>
<section>
  <div class="main" id="third"></div>
</section>
<section>
  <div class="main" id="fourth"></div>
</section>
<section>
  <div class="main" id="fifth"></div>
</section>

更新代码以解决输入新版块时的颜色变化：

var mainTops = [];
$('.main').each(function() {
  mainTops.push($(this).position().top)
});

var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
  if (n < $(window).scrollTop()) 
  {
    count++;
  }
});

$('.nav ul li a').css("color", "#000");
$('.nav ul li a#nav'+count ).css("color", "#fff");

在视口中滚动项目时淡入并淡出DIV

2 个答案: