Fade out a div when scroller hits bottom of another div

This question sort of relates to this one: Append div to body when URL hash # changes

I'm using Curtain.js and currently I have a fixed div that pops up when the hash changes. I.E the div fades in when the user scrolls down the page to different panels. I don't want this div to be visible on the first panel.

The problem I now have is that when the visitor scrolls back up the page to the top the fixed div is still visible. I.e. appearing on top of the first panel. I would like to fade that div out as soon as it hits the bottom of that first panel. The other issue is that the panel's height adjusts to the height of the browser window (fluid/responsive layout) ruling out any fixed pixel JS solutions, which is what my code is based on:

// fade in/fade out banner titles $(window).trigger('scroll'); var divs = $('.nav-wrap'); $(window).scroll(function(){ if($(window).scrollTop() < 550){ divs.fadeOut("slow"); } else { divs.fadeIn("slow"); } });

Anyone have any suggestions??

Answer1:

you can use window.height() which returns the height of the browser's viewport:

var vp = $(window).height(); // height of the browser's viewport var divs = $('.nav-wrap'); $(window).scroll(function(){ if($(window).scrollTop() < vp){ divs.fadeOut("slow"); } else { divs.fadeIn("slow"); } });

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:Fade out a div when scroller hits bottom of another div