传递锚点时，滚动功能会多次触发

时间：2017-08-24 17:51:42

标签： jquery html css

我有一个滚动功能，当某个锚点到达屏幕顶部时，运行正确的函数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');
})

.on("aboutTrig", function () {
    changeMenu('aboutCont', 'ballAbout');
});
/*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-->

1 个答案:

答案 0 :(得分：0)

您可以通过跟踪每个锚点的上方或下方来执行此操作。我在你的代码片段中使用了一个简单的变量data。然后仅在值更改时触发您的函数。

underAnchors
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 underAnchors = {home: false, work: false, about: false};

$(window).scroll(function () {
    var windowScroll = $(window).scrollTop();
    if ( windowScroll > home_offset !== underAnchors.home){
        underAnchors.home = (windowScroll > home_offset);
        $(this).trigger("homeTrig");
    }
    
    if ( windowScroll  > work_offset !== underAnchors.work ){
        underAnchors.work = (windowScroll > work_offset);
        $(this).trigger("workTrig");
    }
    
    if ( windowScroll  > about_offset !== underAnchors.about ){
        underAnchors.about = (windowScroll > about_offset);
        $(this).trigger("aboutTrig");
    }
})

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

.on("workTrig", function () {
    changeMenu('workCont', 'ballWork');
})

.on("aboutTrig", function () {
    changeMenu('aboutCont', 'ballAbout');
});
/*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;
}

相关问题
最新问题