如果div達到某個位置，則在導航欄中混合

對於我的網站，我製作了一個不錯的「Jumbotron」。如果div達到某個位置，則在導航欄中混合

爲了更好地展示它，我想將導航欄的不透明度設置爲0，直到用戶到達下一層。然後，它應該融入

所以我寫了這一點：

$(document).ready(function(){ 

    $(window).on('scroll', function() { 


     var scrollTop  = $(window).scrollTop(), 
      thirdLayerOffset = $('#thirdLayer').offset().top, 
      distanceTop  = (thirdLayerOffset - scrollTop); 

     if(distanceTop < 0) { 
      $('#navMenu').css({ 
       opacity: 1 
      }) 
     } 

     else if (distanceTop > 0) { 
      $('#navMenu').css({ 
       'opacity': 0 
      }) 
     } 



    }); 


});

全集至今罰款，但我想整個體驗更加流暢。所以我嘗試了jquery .animate（）。

if(distanceTop < 0) { 
    $('#navMenu').animate({ 
     opacity: 1 
    }, 500, function() { 
    }); 
}

使用這會導致一個問題：當我再次快速向上滾動時，它保持並開始像瘋了一樣閃爍。我很確定它有500毫秒的問題。

但我沒有一個想法如何解決它。

我見過其他網站使用這樣的東西，所以它應該是可能的。任何人都可以給我一個關於如何使它工作的提示嗎？

問候

編輯：加入HTML：

<div class="container-fluid"> 
     <nav class="navbar navbar-default navbar-fixed-top navMenu" id="navMenu"> 
      <div class="container col-md-12" style="background-color: #ffffff"> 
       <div class="col-md-4"> 
    <img src="lib/img/logo.jpg" id="logo"> 
       </div> 

       <div class="col-md-8"> 
        <!-- Space for menu Bar--> 
       </div> 

      </div> 
     </nav> 
    </div> 


    <div class="container-fluid"> 

<!-- JumboTronText1 --> 
     <div class="col-md-12 JumboC"> 


    <div class="getInvisible2"> 
       <h1 class="animated infinite pulse" id="pulseHeader">Durchatmen und runterscrollen<br> <i class="fa fa-arrow-circle-o-down"></i> 
       </h1> 
      </div> 


       <!-- JumboTron Image with second Text--> 


        <div class="JumboCImage" id="JumboCImage"> 
         <h2 style="z-index: -1;" id="JumboCImageText">Wilkommen. 
         </h2> 
        </div> 


      <div class="container-fluid secondPart"> 
       <div class="secondLayer" id="secondLayer"> 



       </div> 
       <!-- Third Layer Blend Menu in--> 
       <div class="thirdLayer col-md-12 container-fluid" id="thirdLayer"> 

        <h1> 
    <br>TEXT<br> 

        </h1> 


       </div>

很抱歉的壞格式。出了些問題。我會在下班後嘗試修復它。

來源

2015-09-23 Dyon

一個最小的例子，其中也包含HTML和CSS將會很有幫助。 [JSFiddle]（http://jsfiddle.net） –

你可以用CSS3過渡（取決於您的瀏覽器兼容性的要求）做到這一點。

添加過渡和褪色類的導航菜單樣式：

#navMenu { 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
}  

#navMenu.faded{ 
    opacity:0; 
}

當你達到你的目標滾動位置，添加或刪除.faded類根據需要用addClass或removeClass功能。

if(distanceTop < 0) { 
    $('#navMenu').addClass('faded') 
}

來源

2015-09-23 17:46:24 bingo

當然！我猜想我的大腦空白了。非常感謝！ – Dyon

如果這是你的目標，你能把它標記爲正確嗎？試圖在這裏升級！多謝，夥計！ – bingo

我會，只是爲了公平，我想嘗試一下。只要我有我會的！ – Dyon

而是使用jQuery動畫，你可以嘗試在你的CSS增加了#navmenu過渡的

如

#navmenu{ 
transition: opacity 0.5s; 
-moz-transition: opacity 0.5s; 
-webkit-transition: opacity 0.5s; }

來源

2015-09-23 17:45:10 Ash

比你的幫助！ – Dyon

入住這Demo

我認爲這是你在找什麼

$(document).ready(function(){ 
    $(window).on('scroll', function() { 
     var scrollTop  = $(window).scrollTop(), 
      thirdLayerOffset = $('#thirdLayer').offset().top, 
      distanceTop  = (thirdLayerOffset - scrollTop); 
     if(distanceTop > 0) { 
      if(distanceTop < 200 && distanceTop >= 100) 
       $('#navMenu').css({ opacity: (distanceTop-100)/100}); 
      else if(distanceTop <100) 
       $('#navMenu').css({ opacity: 0}); 
      else 
       $('#navMenu').css({ opacity: 1}); 
     } 
     else if (distanceTop <= 0) { 
      $('#navMenu').css({ 
       'opacity': 0 
      }) 
     } 
    }); 
});

來源

2015-09-23 17:47:45 Diptox

非常感謝！ – Dyon

這是因爲在每個滾動您執行，觸發scroll事件，這反過來又導致動畫排隊。

爲了阻止立即排隊的animate方法，可以檢查該元素是否正在動畫。如果是這樣，通過返回false來阻止它。

if(distanceTop < 0) { 
    if($('#navMenu').is(':animated')){ 
     return false; 
    } 
    $('#navMenu').animate({ 
     opacity: 1 
    }, 500, function() { 
    }); 
}

注jQuery的is()方法的使用。

來源

2015-09-23 17:49:40

如果div達到某個位置，則在導航欄中混合

回答

相關問題