滚动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 /类

回答

相关问题