滾動DIV隱藏/顯示用的ID /類

我試圖從底部滾動到頂部，從頂部到底部最後它應該顯示DIV時隱藏的div，但出現一些問題的一種方式或其他圖像看起來像這 -滾動DIV隱藏/顯示用的ID /類

我使用的方法是這樣的：

$(window).scroll(function() { 

     if ($(this).scrollTop()>0) 
     { 
      $("div.nav-down").fadeOut(); 
     } 
     else 
     { 
      $("div.nav-down").fadeIn(); 
     } 
    });

來源

2017-02-22 rinki

你確定你的'$（窗口）滾動（'正在工作如果不嘗試這個' window.onscroll' – psycho

你遇到了什麼樣的問題......請提供一些問題。 – psycho

其實我想顯示在底部和擊球頂級應隱藏哪些是不發生滾動後格。 – rinki

我能夠與動畫功能，而不是淡出和淡入一個做到這一點（只出現在絕對底部時該頁）：

$(window).scroll(function(){ 
 
\t var scrollTop = $(this).scrollTop(); 
 
\t if(scrollTop + $(this).height() == $(document).height()) { 
 
\t \t $(".nav-down").stop().animate({ 
 
\t \t \t opacity: "1", 
 
     height: "50px" 
 
\t \t }); 
 
\t } else { 
 
\t \t $(".nav-down").stop().animate({ 
 
\t \t \t opacity: "0", 
 
     height: "0px" 
 
\t \t }); 
 
\t } 
 
});

.wrapper { 
 
    width: 400px; 
 
    height: 300px; 
 
} 
 

 
.nav-down { 
 
    float: left; 
 
    width: 400px; 
 
    height: 50px; 
 
    background-color: red; 
 
} 
 

 
.lorum { 
 
    float: left; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="lorum">Example text to make it able to scroll up and down: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna. Lorem ipsum dolor sit amet, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div> 
 
    <div class="nav-down">test</div> 
 
    <div class="lorum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div> 
 
</div>

希望它可以幫助

來源

2017-02-22 13:01:06

是其工作如預期'$（窗口）.scroll（函數（）{ \t變種scrollTop的= $（本）.scrollTop（）; \t如果（scrollTop的> 0）{ \t \t $（」 nav-向下「）停止（）動畫（{ \t \t \t不透明度：」1「，高度：」50像素「 \t \t}）; \t}其他{ \t \t $（」導航下「）。.stop（）動畫（{ \t \t \t不透明度：「0」，高度：「0像素」 \t \t}）; '但是我想隱藏從底部到頂部滾動時，當從頂部到底部它應該顯示，因爲我使用這個scrollTop> 0然後它從上到下工作，但從底部到頂部它仍然是 – rinki

我只是做了一個小小的編輯，所以它只出現在最底層時，我不知道你是否注意到了。 –

如果（scrollTop的+ $（本）.height（）==的$（document）.height（）） –

let isScrolling = null; 
 
const ponyElement = document.querySelector('#pony'); 
 

 
window.addEventListener("scroll", e => { 
 

 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
 
    ponyElement.classList.remove("hide"); 
 
    }else{ 
 
    ponyElement.classList.add("hide"); 
 
    } 
 

 
});

*{ 
 
    padding: 0em; 
 
    margin: 0em; 
 
} 
 

 
html{ 
 
    background: skyblue; 
 
} 
 

 
#pony{ 
 
    width: 10em; 
 
    position: fixed; 
 
    bottom: -3em; 
 
    left: 1em; 
 
    transition: all 0.3s ease; 
 
} 
 

 
#pony.hide{ 
 
    bottom: -100vh; 
 
} 
 

 

 
#long{ 
 
height: 100em; 
 
}

<img id='pony' class='hide' src='https://s-media-cache-ak0.pinimg.com/originals/1c/b7/ca/1cb7caa5fe69d5210407b41b15297ff3.jpg' /> 
 

 
<div id='long'></div>

如果我誤解，請告訴我

來源

2017-02-22 13:03:01

肯定的，但我想在上面滾動從底部時在每次底部達到顯示，在代碼中它會彈出來隱藏它當過我停止滾動 – rinki

我只是更新代碼，希望這一次我可以正確的做到：P –

滾動DIV隱藏/顯示用的ID /類

回答

相關問題