Right now, I'm able to stick the div to the top after it scrolls down 320px but I wanted to know if there is another way of achieving this. Below I have my code:
jQuery(function($) {
function fixDiv() {
if ($(window).scrollTop() > 320) {
$('#navwrap').css({ 'position': 'fixed', 'top': '0', 'width': '100%' });
}
else {
$('#navwrap').css({ 'position': 'static', 'top': 'auto', 'width': '100%' });
}
}
$(window).scroll(fixDiv);
fix5iv();
});
it works, but some divs above it will not always be the same height so I can't rely on the 320px. How do I get this to work without using if ($(window).scrollTop() > 320) so I can get it to fade in at the top after the user scrolls past the div #navwrap?
Try using the offset().top of the #navwrap element. That way the element will be fixed from it's starting position in the document, regardless of where that is. For example:
function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) {
$div.css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
Example fiddle
Related
I have used jquery and css to show a loader with gray background during an ajax call. The thing is I need the loader and the gray background to be visible only within a box like as shown below with loading text and icon in center
My code is working fine but the loader with gray background is showing for the full page like as shown below.
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
ajaxindicatorstart('loading data.. please wait..');
function ajaxindicatorstop()
{
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeOut(300);
$('.myBox').css('cursor', 'default');
}
function ajaxindicatorstart(text)
{
if($('.myBox').find('#resultLoading').attr('id') != 'resultLoading'){
$('.myBox').append('<div id="resultLoading" style="display:none"><div><img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
}
$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'fixed',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
$('#resultLoading .bg').css({
'background':'#000000',
'opacity':'0.7',
'width':'100%',
'height':'100%',
'position':'absolute',
'top':'0'
});
$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'fixed',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeIn(300);
$('.myBox').css('cursor', 'wait');
}
Your loader has a position of fixed, this takes the position of the viewport rather than the position of your element.
$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'absolute',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'absolute',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
Also give your myBox a position of relative.
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);
});
Sorry, maybe my title doesn't really explain well what my problem is but it's a quite simple thing with some example code I guess. :)
I created some styles for a design (a design with high header which need to be compressed when a user will scroll down the page). To get a small header out of a high header I switch the styles of it by jQuery.
By now, I check out the scroll position and on a 'x' position the style needs to be changed. Al this works but my problem is, it will keep on changing the style because of my if/else statement I used, Kinda normal and logic with this statement, but I would like to know how I just fire this one time instead of every scroll height bigger than..
$(window).scroll(function () {
position = $(window).scrollTop();
if ( position > 267) {
$('#heading').addClass('header-shadow');
$("#heading-top").animate({
'opacity': 0
});
$("#heading").animate({
'height': 75,
});
$("#site-header").animate({
'height': 155,
});
$("#container").animate({
'top': 497,
});
} else {
$('#heading').removeClass('header-shadow');
$("#heading-top").animate({
'opacity': 100
});
$("#heading").animate({
'height': 248,
});
$("#site-header").animate({
'height': 328,
});
$("#container").animate({
'top': 595,
});
}
});
Thanks in advance!
Nick
You can look a simple flag based solution. A flag which could tell the in the previous scroll execution whether the condition was already handled or not
(function () {
var flag = $(window).scrollTop() > 267;
$(window).scroll(function () {
var position = $(window).scrollTop();
if (!flag && position > 267) {
flag = true;
console.log('true')
} else if (flag && position <= 267) {
console.log('else')
flag = false;
}
});
})();
Demo: Fiddle
I want to make the effect like, after click the box, the box disappeared after expanding its both top and bottom, I did some work, but expends only on bottom. and the effects not quite good, I'd like to make the box bigger. http://jsfiddle.net/wY8Wb/ if someone could help me out? thanks
Check this demo: http://jsfiddle.net/wY8Wb/3/
Code:
$('#videoimg').click(function(){
$(this).fadeOut('slow');
$('#color')
.css({
top: ($(this).offset().top + $(this).height()/2) + 'px',
height: 0
})
.animate({
// the hard-coded "9" you see below is half of the
// difference between the final heights of the 2 divs == (300-282)/2.
// Given here so as to have the color div expand out
// equally at top and bottom
top: ($(this).offset().top - 9) + 'px',
height: '300px'
}, 'slow');
})
JSFiddle : http://jsfiddle.net/wY8Wb/17/
$(document).ready(function(){
$('#videoimg').click(function(){
$(this).fadeOut('slow');
$('#color').animate({height: '300px', top: '0px'}, 'slow');
})
});
changed css also
I have a div which I want to become fixed at 20px from the top of the window when you scroll up and 40px from the footer when you get the bottom. My code seems inconstant, there must be a better way? Page Link
$(document).scroll(function () {
if($(window).scrollTop() >= 345){
$('#rightShipping').css({'position' : 'fixed', 'top' : '0px'});
}
if($(window).scrollTop() <= 346){
$('#rightShipping').css({'position' : '', 'top' : ''});
}
console.log($(window).scrollTop());
});
One quick idea - I would remove the .rightCol block, leaving only the #rightShipping one with top: 20px and it parent with position: relative. And then use this code:
$(document).scroll(function () {
var scrollTop = $(window).scrollTop();
var offsetTop = $('#rightShipping').offset().top;
var positionTop = $('#rightShipping').position().top;
if (scrollTop >= offsetTop - positionTop) {
$('#rightShipping').css('position', 'fixed');
} else {
$('#rightShipping').css('position' : 'relative');
}
});
I really don't know if this will work, as I haven't tested it and I need to get some sleep, but I hope it helps.
Good luck!