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;
}
Related
I've created this collapsable navbar that works nicely,
everytime scrolldown navbar show and everytime scrolltop navbar hide
I would like with show up navbar hide bottom is visible to users can hide navbar .
show/hide button should be scrollUP with navbar and everytime navar hiden this button visible to user !
Any way to do this?
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('header').removeClass('nav-up').addClass('nav-down');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-down').addClass('nav-up');
}
}
lastScrollTop = st;
}
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
bottom: 0;
transition: bottom 0.2s ease-in-out;
width: 100%;
}
.nav-up {
bottom: -40px;
}
main {
background: url() repeat;
height: 2000px;
}
footer {
background: #ddd;
}
* {
color: transparent
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
This is your menu.
</header>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
Anyone know of a good way to write this?
thanks for your helps............................
Check this solution.
Edited
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
if ($('header a').hasClass('Down-Arrow')){
$('header').removeClass('nav-up').addClass('nav-down');
} else {
$('.UP-Arrow').addClass('hide-arrow');
}
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('.UP-Arrow').removeClass('hide-arrow');
$('header').removeClass('nav-down').addClass('nav-up');
}
}
lastScrollTop = st;
}
$(document).on('click','.Down-Arrow',function(){
$(this).removeClass('Down-Arrow').addClass('UP-Arrow');
$('header').removeClass('nav-down').addClass('nav-up');
});
$(document).on('click','.UP-Arrow',function(){
$(this).removeClass('UP-Arrow').addClass('Down-Arrow');
$('header').removeClass('nav-up').addClass('nav-down');
});
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
bottom: 0;
transition: bottom 0.2s ease-in-out;
width: 100%;
}
header a{
color:#000;
position:absolute;
width:30px;
height:30px;
padding:5px;
background:#f5b335;
bottom:40px;
right:20px;
border-radius: 2px 2px 0 0;
text-align:center;
transition-duration:0.3s;
cursor:pointer;
}
.Down-Arrow:after{
content: "˅";
position:absolute;
top:15px;
left:15px;
}
.UP-Arrow:after{
content: "˄";
position:absolute;
top:15px;
left:15px;
}
header.nav-up .Down-Arrow{
bottom:0px;
}
.hide-arrow{
bottom: -40px;
}
.nav-up {
bottom: -40px;
}
main {
background: url() repeat;
height: 2000px;
}
footer {
background: #ddd;
}
* {
color: transparent
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
This is your menu.
<a class="Down-Arrow"></a>
</header>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
You can do it like this. I deleted the CSS color: transparent for you to see. All you need is setting navbar's display none to '';
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('header').removeClass('nav-up');
$('div').removeClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').addClass('nav-up');
$('div').addClass('nav-up');
}
}
lastScrollTop = st;
}
$("div").click(function(){
$('header').slideToggle('fast', function() {
$("div").css("bottom", $("div").css("bottom") === '30px' ? '10px' : '30px');
});
});
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
bottom: 0;
transition: bottom 0.2s ease-in-out;
width: 100%;
}
.nav-up {
bottom: -40px !important;
}
main {
height: 2000px;
}
footer {
background: #ddd;
}
div {
position: fixed;
bottom:30px;
right: 5px;
background:#f5b335;
border: 2px solid #f5b335;
border-radius: 5px;
outline: 0;
transition: bottom 0.2s ease-in-out;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
This is your menu.
</header>
<div> Show Navbar </div>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
I've got a sticky header that disappears when scrolling down and reappears while scrolling back up.
This is the code
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#main-header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
if (scroll >= 500) {
$("#main-header").addClass("nav-shadow");
} else {
$("#main-header").removeClass("nav-shadow");
}
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('#main-header').removeClass('nav-down').addClass('nav-up');
$('#main-header').removeClass('nav-shadow');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('#main-header').removeClass('nav-up').addClass('nav-down');
$('#main-header').addClass('nav-shadow');
}
}
lastScrollTop = st;
}
#main-header {
height:120px;
position:fixed;
top:0;
width:100%;
transition: top 0.2s ease-in-out;
background: red;
z-index: 50000;
}
body {
color: $grey-color;
padding-top: 120px;
}
.nav-up {
top: -120px !important;
}
.nav-shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#page-content {
height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-down" id="main-header">
<p>header</p>
</div>
<div id="page-content"></div>
I've also added a class for a box shadow on scroll. However, I need to remove the box shadow class once the header is back at the very top of the page. Anybody know how to achieve this?
Change if (scroll >= 500) to if ($(window).scrollTop() >= 500). And you don't need to set interval just call your function onscroll
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#main-header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
if ($(window).scrollTop() >= 500) {
$("#main-header").addClass("nav-shadow");
} else {
$("#main-header").removeClass("nav-shadow");
}
hasScrolled();
});
/*
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
*/
function hasScrolled() {
var st = $(this).scrollTop();
// Make scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('#main-header').removeClass('nav-down').addClass('nav-up');
$('#main-header').removeClass('nav-shadow');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('#main-header').removeClass('nav-up').addClass('nav-down');
$('#main-header').addClass('nav-shadow');
}
}
lastScrollTop = st;
}
#main-header {
height:120px;
position:fixed;
top:0;
width:100%;
transition: top 0.2s ease-in-out;
background: red;
z-index: 50000;
}
body {
color: $grey-color;
padding-top: 120px;
}
.nav-up {
top: -120px !important;
}
.nav-shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#page-content {
height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-down" id="main-header">
<p>header</p>
</div>
<div id="page-content"></div>
I'd like to do the fade in the other side : fadeIn from down to up and not like now, fadeOut down to up
var $elem = $('.test.fade');
for (var i = 0; i <= 5; i++) {
$elem.clone().appendTo('body');
}
$(window).scroll(function() {
$('.fade').each(function() {
var bounds = this.getBoundingClientRect(),
op = Math.max((bounds.height + Math.min(bounds.top, 0)) / bounds.height, 0);
$(this).css('opacity', op);
});
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.test {
height: 70vh;
width: 30%;
background-color: rgba(0, 0, 0, 0.6);
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test fade"></div>
jsfiddle
Thank you for help.
Change the opacity calculation to this:
op = Math.max((bounds.height - Math.max(bounds.top, 0)) / bounds.height, 0);
So it becomes dependent on the bottom border of the boxes.
I have a contents DIV which is positioned to fixed at bottom of the page.
It's HTML and CSS looks like this:
<div class="footer-fix">
<p>This is its contents......</p>
</div>
.footer-fix {
background: rgba(255,255,255, 0.6);
display: block;
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
padding: 12px;
border-top: 1px solid #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,.3);
}
My question is now I need to hide this fixed bar when page is scrolling down to the bottom or near the bottom of the page.
This is how I tried it in jquery:
$(document).ready(function() {
var footer = $('.footer-fix');
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) && footer.is(':visible')){
footer.stop().fadeOut(300);
}
else if($(window).scrollTop() < $(document).height() - 100 && footer.is(':hidden')){
footer.stop().fadeIn(300);
}
});
});
But this is not working for me. Can anybody tell what is the wrong with this.
Hope somebody may help me out. Thank you.
Missing ( , ) around ($(window).scrollTop() + $(window).height() > $(document).height() - 100) at if conditions
$(document).ready(function() {
var footer = $('.footer-fix');
$(window).scroll(function() {
if (($(window).scrollTop() + $(window).height() > $(document).height() - 100)
&& footer.is(':visible')) {
footer.stop().fadeOut(300);
} else if (($(window).scrollTop() < $(document).height() - 100)
&& footer.is(':hidden')) {
footer.stop().fadeIn(300);
}
});
});
body {
height: 520px;
}
.footer-fix {
background: rgba(255, 255, 255, 0.6);
display: block;
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
padding: 12px;
border-top: 1px solid #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="footer-fix">
<p>This is its contents......</p>
</div>
I'm not sure why you have .stop()
Also try changing if, else if to if, else and fix that syntax error:
$(document).ready(function() {
var footer = $('.footer-fix');
$(window).scroll(function() {
if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100) && footer.is(':visible')){
footer.fadeOut(300);
}
else {
footer.fadeIn(300);
}
});
});
when u see this page
http://twitter.github.com/bootstrap/javascript.html
there's an auto float bar at where u scroll your page it auto stick to top
where can i find a plugin and got many custom settings like this ?
i've copy the html and javascript code from that page like below
(function($){
var $win = $(window);
var $nav = $('.subnav');
var navTop = $('.subnav').length && $('.subnav').offset().top - 38;
var isFixed = 0;
processScroll();
$win.on('scroll', processScroll);
function processScroll() {
console.log('test');
var i, scrollTop = $win.scrollTop();
if (scrollTop >= navTop && !isFixed) {
isFixed = 1;
$nav.addClass('subnav-fixed');
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0;
$nav.removeClass('subnav-fixed');
}
};
})(jQuery);
but it just can't move and stick to top
Make sure you incorporate the css as well as the html/javascript.
The subnav-fixed class is useless without the accompanying css in your stylesheet.
Copied from the site (via firebug) :
.subnav-fixed {
/*important part*/
left: 0;
position: fixed;
right: 0;
top: 40px;
z-index: 1020;
/*design stuff*/
border-color: #D5D5D5;
border-radius: 0 0 0 0;
border-width: 0 0 1px;
box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 5px rgba(0, 0, 0, 0.1);
}