We Keep Coding

hide a div after certain percent of scrolling

I have a div which have two CTA buttons.I'm going to hide this div after reaching 90% of the page or reaching to my #footer div. The reason i'm doing this is to prevent it from interfering with footer.
I had found some codes but it will hide the div after 800px scroll not based on percentage .
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
Any idea?

hide this div after reaching 90% of the page:
You need to get 90% with Math.round($(document).height() * 90 / 100)
var height = Math.round($(document).height() * 90 / 100);
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > height) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
or reaching to my #footer div
You need to use offset().top for getting element offset from window:
var height = Math.round($('#footer').offset().top);
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > height) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
<div style="height:1000px;"></div>
<div id="footer"></div>

Here I have converted it in Percentage. Update PER value to update config.
//PER is Percentage value
var PER = 90;
var yInPixel, totalHeight;
//If page if with dynamic height change totalHeight and yInPixel after Resize Event
$(document).ready(function() {
totalHeight = $(this).height();
yInPixel = totalHeight * (PER / 100) - window.innerHeight;
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > yInPixel) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>

Show div after scroll and hide div at the end of the page

I try to show a div after scrolling down 1500px and i want to hide the div when 90% of the page is scrolled (so, nearly at the end of the page).
My Code works fine to show it up after 1500px but i don't know how to hide it when the end of the page is reached.
This is my code:
<style type="text/css">
#sample {
background: #fff none repeat scroll 0 0;
position: fixed;
bottom: 0;
height: auto;
max-height:100px;
width: 100%;
z-index: 999;
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 1500) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}
});
</script>
<div id="sample">
just some content...
</div>
I would be very glad if someone can help me with the problem. Many Thanks.

You could do something like this:
var y = $(this).scrollTop();
if (y > 1500 && y < ($(document).height() * 0.9)) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}

You can calculate the "90%"-scroll with $(window).height() and $(document).height(). See the example:
$(function() {
$(document).scroll(function() {
var y = $(this).scrollTop();
if ((y + $(window).height()) > ($(document).height() * 0.9)) {
$('#sample').fadeOut();
return;
}
if (y > 1500) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}
});
})
.content {
height: 3000px;
}
#sample {
background: #ff0000;
position: fixed;
bottom: 0;
height: auto;
max-height: 100px;
width: 100%;
z-index: 999;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
Content
</div>
<div id="sample">
sample
</div>

changing menu background-color when at top of screen

I have a menu which animates into view (from the top) when user scrolls up. And animates up (off screen) when user scrolls down. However, I want the background of the navigation to be black when user is at the top of the page, and white after they are a certain distance from the top.
html-snippet (working code)
...
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
} else {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
html
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>
css
#s-nav {
position: fixed;
z-index: 999;
background-color: #fff;
top: 0; left: 0;
width: 100%;
transition: top 0.5s ease;
}
#s-nav.nav-up { top: -75px; }

Something like this.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("#s-nav").addClass('white_bg');
} else $("#s-nav").removeClass('white_bg');
});
body {
background: #f1f1f1;
height: 1000px;
}
.nav-down {
height: 30px;
width: 100%;
border: 1px solid #ddd;
position: fixed;
background: #000;
color: #ff0;
}
.white_bg{
background: #000;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>

Sticky sidebar overlaps to the footer?

I have Created custom sticky sidebar for ADS, it works but there is an issue. when I scroll it to the bottom, it overlaps on the footer. pls check. - http://screencast.com/t/oEjcrbocB05C
var stickySidebar = $('.sticky');
if (stickySidebar.length > 0) {
var stickyHeight = stickySidebar.height(),
sidebarTop = stickySidebar.offset().top;
}
// on scroll move the sidebar
$(window).scroll(function () {
if (stickySidebar.length > 0) {
var scrollTop = $(window).scrollTop();
if (sidebarTop < scrollTop) {
stickySidebar.css('top', scrollTop - sidebarTop);
// stop the sticky sidebar at the footer to avoid overlapping
var sidebarBottom = stickySidebar.offset().top + stickyHeight,
stickyStop = $('.main-content').offset().top + $('.main-content').height();
if (stickyStop < sidebarBottom) {
var stopPosition = $('.main-content').height() - stickyHeight;
stickySidebar.css('top', stopPosition);
}
}
else {
stickySidebar.css('top', '0');
}
}
});
$(window).resize(function () {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
});
.sticky {
position: relative;
top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check for site url is - http://www.test2.guru99.com/java-tutorial.html
Please Help Me !

Modify your following CSS
#rt-footer-surround {
background-color: #3f3f3f;
color: #f8f8f8;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
To this, Add position:relative and z-index:1
#rt-footer-surround {
background-color: #3f3f3f;
color: #f8f8f8;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}

external jQuery scroll not working

I am trying to make a sticky top navigation bar that follows the screen when it reaches the top of the page. Basically, when it reaches the top of the page, the position is changed from relative to fixed.
My code works when I include the jScript internally inside the body of the HTML code. I am new to using jQuery, so if you guys can help me out.
Here is my html:
<html>
<head>
<title></title>
<link href="main-style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="sticky_nav.js"></script>
</head>
<body>
<header class="banner">
<div class="logo"></div>
<div class ="contact-info">
<div class="fb"></div>
</div>
</header>
<nav class="top-nav" id="top-nav">
</nav>
<div class="main">
</div>
</body>
</html>
Here is my css:
body {
padding-top: 450px;
background-image: url(background.jpg);
}
.banner {
left: 50%;
margin: 0 0 0 -25%;
position: fixed;
top: 0px;
height: 475px;
width: 950px;
z-index: -10;
background-image: url(img4.jpg);
}
.top-nav {
position: relative;
margin-left: auto;
margin-right: auto;
background: #F0742F;
width: 950px;
height: 70px;
z-index: 20;
margin-bottom: -60px;
box-shadow: 0 5px 3px rgba(0,0,0,.4);
text-align: center;
padding-top: 20px;
border-radius: 10px;
}
.top-nav a {
font: 25px bold;
text-decoration: none;
color: #FFF;
padding-left: 20px;
}
.top-nav-scrolled {
position: fixed;
width: 100%;
top: 0;
left: 50%;
margin: 0 0 0 -25%;
}
Here is my js:
var tn = $(".top-nav");
var tns = $(".top-nav-scrolled");
var hdr = $('header').height();
$(document).ready(function(){
$(window).scroll(function() {
if( $(this).scrollTop() > (hdr - 20) ) {
if( $(this).scrollTop() > (hdr - 20) ) {
tn.add(tns);
}
else {
tn.remove(tns);
})
});
When I put the js code internally, between script tags it works. So I'm not sure what I am doing wrong.

Since you call your sticky_nav.js in document head, non of the body elements do not exist yet. So, the error is in tn, tns and hdr declarations: they should be inside dom-ready function.
In addition, best praxis would be change the class via script, define class styles via CSS:
$(document).on('ready', function(){
var tn = $(".top-nav");
var hdr = $('header').height();
$(window).on('scroll', function() {
tn.toggleClass('top-nav-scrolled', $(this).scrollTop() > (hdr - 20))
});
});

$(this).scrollTop() > (hdr - 20)
looks weird.
I believe you need to cache the offset().top of the nav-bar (because it will change dynamically with position changes) and then check for it reached by window.
var tn = $(".top-nav");
var tns = $(".top-nav-scrolled");
var hdr = $('header').height();
var offset = tn.offset().top;
$(document).ready(function(){
$(window).scroll(function() {
if( $(this).scrollTop() > offset) {
tn.css("position", "fixed");
tn.css("top", "0");
tn.css("left", "50%");
tn.css("margin","0 0 0 -25%");
}
else {
tn.css("position", "relative");
tn.removeAttr("left");
tn.removeAttr("top");
tn.removeAttr("margin");
}
})
});
Like that.
And also, you can pass plain object to css() method, like this:
tn.css({
"position": "fixed",
"top": "0"
});
and so on.