1
我有一個滾動函數，當某個錨到達屏幕的頂部時，運行正確的函數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 {
\t 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 {
\t 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;
\t 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 {
\t 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 {
\t opacity: 1;
}
.inactive {
\t opacity: 0.2;
}
.active {
\t opacity: 1;
}
#ball {
\t 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 {
\t padding: 5px 0 20px 0;
}
#work {
\t padding-bottom: 20px;
}
.home-container {
\t position: relative;
height:100vh;
}
.work-container {
\t 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-->
你是一個絕對的傳奇！謝謝你的解釋。我不會忘記這一點。謝謝。 – Darian