停止滚动导航连续发射

时间：2017-08-24 09:20:50

标签： jquery html css

“简化”

我有一个滚动功能，当一个锚到达屏幕顶部时，运行功能 ONCE 。

当用户向上滚动时，锚点会通过屏幕底部。运行 ONCE 功能。

每个锚点在向上或向下滚动时都会运行相应的功能。

试图简化这个因为我有抱怨，现在它说我需要更多的文字哈哈。

见下面的代码 - 

function changeMenu(thisLink, ballName){

    var linkChange = $('a[href="' + '#' + thisLink + '"]');
    
    $(".scroll-to").removeClass("active");
    
    linkChange.addClass('active');
    
    $('#ball').removeClass();
    
    $('#ball').addClass(ballName);

}

var home_offset = $('#homeCont').offset().top;
var work_offset = $('#workCont').offset().top;
var about_offset = $('#aboutCont').offset().top;

$(window).scroll(function () {
    if ( $(window).scrollTop() > home_offset ){
        $(this).trigger("homeTrig");
    }
    
    if ( $(window).scrollTop() > work_offset ){
        $(this).trigger("workTrig");
    }
    
    if ( $(window).scrollTop() > about_offset ){
        $(this).trigger("aboutTrig");
    }
})

.on("homeTrig", function () {
    changeMenu('homeCont', 'ballHome');
    console.log('Trigger Home');
})

.on("workTrig", function () {
    changeMenu('workCont', 'ballWork');
    console.log('Trigger Work');
})

.on("aboutTrig", function () {
    changeMenu('aboutCont', 'ballAbout');
    console.log('Trigger About');
});
/*MENU STYLES*/

.menu-container {
	position: fixed;
    top: 50px;
    right: 50px;
    z-index: 1;
}

.menu-label{
    position: absolute;
    right: 0;
    z-index: 2;
}

line{
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
}

#menuIcon {
	cursor: pointer;
}

#menuIcon:hover #botPath{
    transform: translate(0px, -130px);
}

#menuIcon:hover #topPath{
    transform: translate(0px, 130px);
}

/*MENU NAV STYLES*/

input#menuCheck:checked ~ .menu-nav-container{
    opacity: 1;
    height: 100%;
    z-index: 2;
}

.menu-nav-container {
    position: relative;
    opacity: 0;
	margin-top: 40px;
    height: 0;
    z-index: -999;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

#menuNav {
    float: right;
    display: block;
}

.menu-list {
    float: left;
    margin-top: 10px;
}

.menu-item {
	font-size: 2em;
    text-transform: uppercase;
    color: #6d6d6d;
    cursor: pointer;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

.menu-item a{
    color: #6d6d6d;
}

.menu-item:hover {
	opacity: 1;
}

.inactive {
	opacity: 0.2;
}

.active {
	opacity: 1;
}

#ball {
	transform: translate(0, 25px);
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transform: translate3d(0,25px,0);
}

#ball.ballWork{
    transform: translate3d(0, 25px, 0);
}

#ball.ballWork{
    transform: translate3d(0, 130px, 0);
}

#ball.ballAbout{
    transform: translate3d(0, 230px, 0);
}

#home {
	padding: 5px 0 20px 0;
}

#work {
	padding-bottom: 20px;
}

.home-container {
	position: relative;
    height:100vh;
}

.work-container {
	height: 800px;
}

.about-container{
    height: 1400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="menu-container">
  <input type="checkbox" id="menuCheck">
  <label for="menuCheck" class="menu-label">
                    <svg version="1.1" id="menuIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="40px" height="20px" viewbox="0 0 500 310" enable-background="new 0 0 500 310" xml:space="preserve">
                    <line id="topPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="21.695" x2="498" y2="21.695"/>
                    <line id="midPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="154.5" x2="498" y2="154.5"/>
                    <line id="botPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="287.305" x2="498" y2="287.305"/>
                    </svg>
                </label>

  <div class="menu-nav-container">
    <svg version="1.1" id="menuNav" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="260" viewbox="0 0 22.333 500" enable-background="new 0 0 22.333 500" xml:space="preserve">
                        <line id="line" fill="none" stroke="#6D6D6D" stroke-width="2" stroke-miterlimit="10" x1="10.948" y1="1" x2="10.948" y2="307"/>
                        <circle id="ball" fill="#6D6D6D" cx="10.948" cy="28.16" r="8.636"/>
                    </svg>

    <ul class="menu-list">
      <li class="menu-item" id="home"><a href="#homeCont" class="scroll-to inactive active" onclick="changeMenu('homeCont', 'ballHome')">Home</a></li>
      <li class="menu-item" id="work"><a href="#workCont" class="scroll-to inactive" onclick="changeMenu('workCont', 'ballWork')">Work</a></li>
      <li class="menu-item" id="about"><a href="#aboutCont" class="scroll-to inactive" onclick="changeMenu('aboutCont', 'ballAbout')">About</a></li>
    </ul>

  </div>
</div>

<div class="content-container home-container col-12" id="homeCont">
                <div class="particle-bg"></div>
                <div class="logo-container">
                    <img class="logo" src="img/dSteynLogo.png">
                    <h1 class="logo-heading">darian steyn</h1>
                </div>
                
                <a href="#workCont" class="scroll-down toWork scroll-to"></a>
            </div><!--END OF HOME CONTAINER-->
            
            <div class="content-container work-container col-12" id="workCont">
                
                <a href="#aboutCont" class="scroll-down toAbout scroll-to"></a>
            </div><!--END OF WORK CONTAINER-->
            
            <div class="content-container about-container col-12" id="aboutCont">
            
            </div><!--END OF ABOUT CONTAINER-->

2 个答案:

答案 0 :(得分：0)

这就是scroll事件的工作方式 - 它为元素滚动的每个像素触发一次。

作为一种解决方法，您可以“反弹”＆＃39;事件通过将其与超时配对，以便您的逻辑仅在滚动结束后短暂延迟后触发，如下所示：

＆＃13;
＆＃13; 
function changeMenu(thisLink, ballName) {
  var linkChange = $('a[href="' + '#' + thisLink + '"]');
  $(".scroll-to").removeClass("active");
  linkChange.addClass('active');
  $('#ball').removeClass();
  $('#ball').addClass(ballName);
}

var home_offset = $('#homeCont').offset().top;
var work_offset = $('#workCont').offset().top;
var about_offset = $('#aboutCont').offset().top;

var scrollTimer;
$(window).scroll(function() {
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(function() {
    if ($(window).scrollTop() > home_offset) {
      $(this).trigger("homeTrig");
    }
    if ($(window).scrollTop() > work_offset) {
      $(this).trigger("workTrig");
    }
    if ($(window).scrollTop() > about_offset) {
      $(this).trigger("aboutTrig");
    }
  }, 250);
}).on("homeTrig", function() {
  changeMenu('homeCont', 'ballHome');
  console.log('Trigger Home');
}).on("workTrig", function() {
  changeMenu('workCont', 'ballWork');
  console.log('Trigger Work');
}).on("aboutTrig", function() {
  changeMenu('aboutCont', 'ballAbout');
  console.log('Trigger About');
});
＆＃13; 
/*MENU STYLES*/

.menu-container {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 1;
}

.menu-label {
  position: absolute;
  right: 0;
  z-index: 2;
}

line {
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
}

#menuIcon {
  cursor: pointer;
}

#menuIcon:hover #botPath {
  transform: translate(0px, -130px);
}

#menuIcon:hover #topPath {
  transform: translate(0px, 130px);
}


/*MENU NAV STYLES*/

input#menuCheck:checked~.menu-nav-container {
  opacity: 1;
  height: 100%;
  z-index: 2;
}

.menu-nav-container {
  position: relative;
  opacity: 0;
  margin-top: 40px;
  height: 0;
  z-index: -999;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#menuNav {
  float: right;
  display: block;
}

.menu-list {
  float: left;
  margin-top: 10px;
}

.menu-item {
  font-size: 2em;
  text-transform: uppercase;
  color: #6d6d6d;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

.menu-item a {
  color: #6d6d6d;
}

.menu-item:hover {
  opacity: 1;
}

.inactive {
  opacity: 0.2;
}

.active {
  opacity: 1;
}

#ball {
  transform: translate(0, 25px);
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
  transform: translate3d(0, 25px, 0);
}

#ball.ballWork {
  transform: translate3d(0, 25px, 0);
}

#ball.ballWork {
  transform: translate3d(0, 130px, 0);
}

#ball.ballAbout {
  transform: translate3d(0, 230px, 0);
}

#home {
  padding: 5px 0 20px 0;
}

#work {
  padding-bottom: 20px;
}

.home-container {
  position: relative;
  height: 100vh;
}

.work-container {
  height: 800px;
}

.about-container {
  height: 1400px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="menu-container">
  <input type="checkbox" id="menuCheck">
  <label for="menuCheck" class="menu-label">
    <svg version="1.1" id="menuIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="20px" viewbox="0 0 500 310" enable-background="new 0 0 500 310" xml:space="preserve">
     <line id="topPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="21.695" x2="498" y2="21.695"/>
     <line id="midPath" fill="none" stroke="#6D6D6D" stroke-width="40"   stroke-miterlimit="10" x1="3" y1="154.5" x2="498" y2="154.5"/>
     <line id="botPath" fill="none" stroke="#6D6D6D" stroke-width="40" stroke-miterlimit="10" x1="3" y1="287.305" x2="498" y2="287.305"/>
    </svg>
  </label>

  <div class="menu-nav-container">
    <svg version="1.1" id="menuNav" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="260" viewbox="0 0 22.333 500" enable-background="new 0 0 22.333 500" xml:space="preserve">
      <line id="line" fill="none" stroke="#6D6D6D" stroke-width="2" stroke-miterlimit="10" x1="10.948" y1="1" x2="10.948" y2="307"/>
      <circle id="ball" fill="#6D6D6D" cx="10.948" cy="28.16" r="8.636"/>
    </svg>
    <ul class="menu-list">
      <li class="menu-item" id="home"><a href="#homeCont" class="scroll-to inactive active" onclick="changeMenu('homeCont', 'ballHome')">Home</a></li>
      <li class="menu-item" id="work"><a href="#workCont" class="scroll-to inactive" onclick="changeMenu('workCont', 'ballWork')">Work</a></li>
      <li class="menu-item" id="about"><a href="#aboutCont" class="scroll-to inactive" onclick="changeMenu('aboutCont', 'ballAbout')">About</a></li>
    </ul>
  </div>
</div>

<div class="content-container home-container col-12" id="homeCont">
  <div class="particle-bg"></div>
  <div class="logo-container">
    <img class="logo" src="img/dSteynLogo.png">
    <h1 class="logo-heading">darian steyn</h1>
  </div>

  <a href="#workCont" class="scroll-down toWork scroll-to"></a>
</div>
<!--END OF HOME CONTAINER-->

<div class="content-container work-container col-12" id="workCont">

  <a href="#aboutCont" class="scroll-down toAbout scroll-to"></a>
</div>
<!--END OF WORK CONTAINER-->

<div class="content-container about-container col-12" id="aboutCont">

</div>
<!--END OF ABOUT CONTAINER-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

也许尝试对Javascript片段中的滚动事件实施去抖/加油？ 我建议阅读下面的帖子

https://css-tricks.com/debouncing-throttling-explained-examples/

相关问题
最新问题