Having a bit of a problem. Looking to build a sticky nav, and when the sticky nav triggers, adding the 'is-sticky' class, i'd like to add a different class to another div.
Below is the code..
Thanks
<script>
$(document).ready(function(){
if ( $(".sticky-wrapper").hasClass("is-sticky") ) {
$("#menu-item-25").css({display: "inline"});
}
});
</script>
There's a lot going on here that I'm not sure about, but:
You need an event listener that leads to code that adds/removes the classes/css that you want. What you have now is an event listener, but it's listening for the document ready state, not a scroll that triggers a sticky nav. So:
<script>
$(document).ready(function(){
//add a listener for something that would indicate a sticky-state change, presumably scrolling
$(document).on('scroll', function() {
checkForStickyNav();
});
function checkForStickyNav() {
//look for sticky nav, and prevent running over and over
if ( $(".sticky-wrapper").hasClass("is-sticky") && !$(".otherStuff").hasClass("stickyfied") {
//do your stuff here; presumably changing CSS as appropriate
//make sure to add something along the lines of 'stickyfied' above, so that you don't keep re-adding the css on every scroll event
$("#menu-item-25").css({display: "inline"});
$('.otherStuff').addClass('stickyfied');
}
</script>
To add a class you need
$("#element").addClass('myclass');
You can also remove a class with
$("#element").removeClass('myclass');
And toggle a class with
$("#element").toggleClass('myclass');
But your code is far away from a sticky nav, here is how I do it
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('nav').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('nav').css({ 'position': 'fixed', 'top': '0px', 'left': '0px', 'line-height': '30px' });
} else {
$('nav').css({ 'position': 'relative', 'top': '0px' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
Obviously you'll have to play around with the css
Related
I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.
Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.
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);
});
I want to move a bootstrap "navbar" header off the page when the navbar's position on the page reaches 400px.
If you look at this jsfiddle, I want the .navbar to leave the top of the page when the blue block begins (at 400px). The navbar would stay on the page through the red div, then leave the top of the page when the blue block begins.
I have tried to do this with scrollorama (jquery plugin), but have not had success yet:
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});
I am looking for either a pure javascript solution, or with the scrollorama plugin. Thanks for any ideas!
I'm not very familiar with the scrollorama plugin but you can get this done simply with jQuery via the scroll() event:
$(window).scroll(function () {
var winTop = $(this).scrollTop();
var redHeight = $('#red').height();
if (winTop >= redHeight) {
/*if the scroll reaches the bottom of the red <div> make set '#move' element
position to absolute so it will move up with the red <div> */
$('#move').css({
'position': 'absolute',
'bottom': '0px',
'top': 'auto'
});
} else {
//else revert '#move' position back to fixed
$('#move').css({
'position': 'fixed',
'bottom': 'auto',
'top': '0px'
});
}
});
See this updated jsfiddle: jsfiddle.net/52VtD/1945/
Edit: make it so that the navbar disappears at the same point that the red div ends
I noticed that earlier as well but I'm having trouble locating the problem so I removed your imported style sheet and created a basic style for the navbar. To get the navbar disappears at the same point that the red div ends you need to subtract the navbar's height to the condition:
if (winTop >= redHeight - $('#move').height()) {
I've also restructured the markup to get this working properly. I've nested the navbar inside the red div and set the red div's position to relative.
See this jsfiddle: jsfiddle.net/52VtD/1981/
listen to the scroll event using jquery to find if the navbar overlaps with the red or blue div
Assign a class to the red div
<div class="redDiv" style="height:400px; background-color: red;">
Then listen to the scroll event and use the getBoundingClientRect() to find the co-ord of the navbar and the div in the view port to check for overlap
$(document).scroll(function(event)
{
var rect1 = $('.navbar').get(0).getBoundingClientRect();
var rect2 = $('.redDiv').get(0).getBoundingClientRect();
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
if(!overlap)
{
if ( $(".navbar").is(":visible") ) {
$('.navbar').hide();
}
}
else
{
if ( !$(".navbar").is(":visible") ) {
$('.navbar').show();
}
}
});
Here is a working fiddle
http://jsfiddle.net/SXzf7/
I am building a responsive site that has overlays slide out from the side. The issue is on mobile these overlays need to be able to scroll but i dont want the page behind to scroll. On desktop setting overflow:hidden works to stop the page from scrolling but still allow the slide out div to scroll. However, in IOS this property is not working. The base page is still scrollable. I have created a jsbin below. Can someone tell me how to get the black div to scroll on IOS but prevent the base page from scrolling? It works fine on desktop but not on mobile.
http://jsbin.com/isayuy/4/
Thanks
You have to add this to your CSS:
html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }
That works for me. See here: http://jsbin.com/isayuy/10/
The solution from #Tim Wasson works for me.
As another option, I'm wondering if there's a reason why you don't apply position:fixed to the body tag when the slide-outs are visible?
http://jsbin.com/isayuy/6
Appologies if I'm missing something obvious.
Good luck!
Here's what I'm doing - this solution prevents the background from scrolling, while retaining the initial position (i.e. it doesn't jump to the top).
preventScroll : function(prevent) {
var body = $('body'), html = $('html'), scroll;
if (prevent) {
var width = body.css('width');
scroll = window.pageYOffset;
// This is all you need to do to prevent scroll on everything except iOS.
html.css({ 'overflow': 'hidden'});
// For iOS, change it to fixed positioning and make it in the same place as
// it was scrolled.
// For all systems, change max-width to width; this prevents the page getting
// wider when the scrollbar disappears.
body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
} else {
scroll = -parseInt(body.css('top'));
html.css({ 'overflow': '' });
body.css({ 'position': '', 'top': '', 'max-width': '' });
window.scrollTo(0, scroll);
}
},
This will cause problems if you resize (rotate phone) while scroll is prevented; I also have a resize event which calls preventScroll(false) and then preventScroll(true) to update the position in that case.
yes. it's working.and added the following code also
if (window.location == window.parent.location &&
navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('#orderpop').attr('style',
'-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}
preventScroll : function(prevent) {
var body = $('body'), html = $('html'), scroll;
if (prevent) {
var width = body.css('width');
scroll = window.pageYOffset;
// This is all you need to do to prevent scroll on everything except iOS.
html.css({ 'overflow': 'hidden'});
// For iOS, change it to fixed positioning and make it in the same place as
// it was scrolled.
// For all systems, change max-width to width; this prevents the page getting
// wider when the scrollbar disappears.
body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
} else {
scroll = -parseInt(body.css('top'));
html.css({ 'overflow': '' });
body.css({ 'position': '', 'top': '', 'max-width': '' });
window.scrollTo(0, scroll);
}
}
I have few draggable elements inside Scrollbar (mcustomscrollbar). If I try to drag this element to the droppable area which is below the visible area of scroller, then the scroll does not automatically move downwards.
Please suggest how this can be achieved.
In my case I use the mCustomScrollbar with jquery-sortable (https://johnny.github.io/jquery-sortable/) -
I needed a way to move the scroller content while dragging the sortable element to get to some hidden below content.
I used the onDrag event of jquery-sortable to move the scroller using mCustomScrollbar scrollTo method:
onDrag: function ($item, position) {
// original functionality - better be safe
$item.css(position);
var sign = '-';
if ($this._prevDragPositionY > position.top) {
sign = '+'; //console.log('scrolling up');
} else { //console.log('scrolling down'); }
$this._prevDragPositionY = position.top;
$('.jsScroll').mCustomScrollbar("scrollTo", sign + "=75", {
scrollInertia: 300,
scrollEasing: "linear"
});
I hope this helps :)