How to make float navbars with JS and CSS? - javascript

How can I make my lower navbar to stay in the top when I scrolling down? I mean I want to hide only upper navbar? The lower navbar should take place of upper nav.
I tried to affix function:
$('.navbar-lower').affix({
offset: {top: 50}
});
But my code doesn't work.
Here is my try on jsFiddle: http://jsfiddle.net/hw3gxhhf
How can I fix it?
PS
Also I use jquery.bootstrap-autohidingnavbar.min.js
$("div.navbar-fixed-top").autoHidingNavbar({
"showOnBottom": false,
"showOnUpscroll": false
});

You can always listen for the scroll event, and check the scrollTop value. Once you've reached the 50px threshold, you change the margin-top value:
window.addEventListener('scroll', function(){
if (document.body.scrollTop >= 50) {
$('.navbar-lower').css('margin-top','0px');
} else {
$('.navbar-lower').css('margin-top','50px');
}
})

Try using the .scroll function to addClass of position:fixed;
and z-index:10;
script-
$(window).scroll(function () {
var scrolled = $(window).scrollTop();
var elemTop = $('#move').offset().top;
if (scrolled >= elemTop) {
$('body').addClass('nav-is-fixed');
}
else {
$('body').removeClass('nav-is-fixed');
}
});
css-
.nav-is-fixed #move {
position: fixed;
top: 0;
z-index:10;
}

Related

How can I make a containers Position: sticky; until scroll amount is met in viewport

I am trying to recreate this effect in WordPress using the Elementor builder, where the section stays the same/sticky until the user has scrolled a number of times/all the scroll effects are complete. Any advice on how I can best achieve this? Or if there is a plugin that does this?
From inspect, all I can see is that the container is set to "position: sticky;" but this is not working for me in Wordpress.
What additional steps do I need to take that I'm missing? Thanks!
Have you tried $(window).scroll() function?
JS:
jQuery(function($) {
$(document).ready(function() {
var div_top = $('.sticky-bar').offset().top; //define your sticky div
$(window).scroll(function() {
var window_top = $(window).scrollTop() + 61;
if (window_top > div_top) {
if (!$('.sticky-bar').is('.sticky')) {
$('.sticky-bar').addClass('sticky');
}
} else {
$('.sticky-bar').removeClass('sticky');
}
});
});
});
CSS:
/* sticky state */
.sticky-bar.sticky {
position: sticky;
}
/* normal state */
.sticky-bar {
position: relative;
}

scrollTop suddenly not working for sticky menu

I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).
Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?
Live site at [site no longer exists]
Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.
NOTE: The site is built on WordPress, so no-conflict mode is in effect.
I think you are initialising the sticky menu function before you set the min-height of $('big-div').
On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop, it is stored at 54px. Then on your scroll event you are comparing against this.
Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.
Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});

How to implement auto fixing a div like https://www.yahoo.com

In Yahoo website, when scroll down, a blue part is fixed to the top, while if not scroll down, the blue part is not fixed.
How to implement this ?
May I try onScroll function?
I use inspect element and, apperantly it changes class when that "blue part" is not in view,
so what it is doing (I guess) is changing the classes while it is in view and not in view, you can find if a div is in view and then change accordingly, "onscroll" is a great idea
Use $(window).scroll(function() on the part which you want to be fixed.
Fiddle Demo : Demo
$(window).scroll(function(){
if ($(window).scrollTop() >= 100) {
$('.sticky-header').addClass('fixed');
}
else {
$('.sticky-header').removeClass('fixed');
}
});
If you want to apply the fixed part to the header replace the class name in the $(window).scroll(function(){}): function.
Example for fixed Header while scrolling : Demo-2
You can make it fixed just with css.
<div id="myHeader">Header stuff</div>
#myHeader {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Yes, you need to bind to win scroll like this:
var element = $(YOURTOPELEMENT)
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > element.offset().top) {
element.css({
position: "fixed",
top: 0
})
} else {
element.css({
position: "relative"
})
}
})

Add an animation to jQuery scrolling sidebar

I am using a scrolling sidebar function in jQuery and would like to add an animation to the transition. How do I edit my code to apply an animation to smooth the transition when scrolling up and down on the page?
Here is my FIDDLE
Here is my js:
$(function() {
var $blah = $("#blah"),
$window = $(window),
offset = $blah.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$blah.css('top','120px');
} else {
$blah.css('top','440px');
}
});
});
Here is my CSS:
#blah {
display:none;
top: 320px;
right: 30px;
position: fixed;
margin: 0 20px 0 20px;
padding: 0px !important;
}
Try using .stop().animate(). The reason why I recommend using .stop() before .animate() is to prevent the effects from chaining excessively. Basically you're going to instruct the browser to "drop what you're doing now when I scroll" and then "start animation".
$(function () {
var $blah = $("#blah"),
$window = $(window),
offset = $blah.offset();
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$blah.stop().animate({
top: 50
});
} else {
$blah.stop().animate({
top: 100
});
}
});
});
See fiddle here - http://jsfiddle.net/4VbDN/6/
[Edit]: You can even adjust the duration of the animation as well as assign a callback function even .animation() is triggered. For more instructions, check the jQuery API for .animate() :)

Change Div Y Position with mouse wheel and sidebar

I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/

Categories