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/
Related
When the user opens the page, the button is fixed on the bottom of the screen, always visible and it stays there as the user scrolls down the page.
Once it hits a div (footer) the button positioning changes to relative.
Thanks guys!
http://jsfiddle.net/noemitotos/tWpkf/508
var targetOffset = $("#footer").offset().top;
var $windowscroll = $(window).scroll(function () {
if ($windowscroll.scrollTop() >= targetOffset) {
$('#fixedbutton').css({ "position": "relative" });
} else {
$('#fixedbutton').css({ "position": "fixed" });
}
});
Please post some code example so that we can better help you. I'm assuming you are looking for something like - http://jsfiddle.net/tWpkf/498/
In this example the image is fixed-
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
}
and the following script simply changes the css on click-
$(function() {
$('.clickme').click(function() {
$("#fixedbutton").css('position', 'relative');
});
});
UPDATE as per comment- http://jsfiddle.net/tWpkf/511/
Open the console to see how it is getting calculated. I believe the issue is with what targetOffset is defined as. As an example, I changed it to $("#footer").offset().top - $(window).height() - 100;
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"
})
}
})
I have a 100% height div with a nav underneath it and more content under that.
When the user scrolls passed the nav it sticks to the top of the page and when the user goes back to the 100% height div the nav is left behind.
As the div is 100% height the 'data-offset-top' for the nav needs to change dynamically.
The following code works for that:
$('#navigation').affix({
offset: {
top: $('#hero').height()
}
});
However when I resize the page the value of the offset does not get readded to the offset.
The following code checks for the page height to change and then gives the new height to the data-offset-top but it does not ` function affixChange()
{
$('#navigation').attr('data-offset-top', $('#hero').height());
$('#navigation').affix({
offset: {
top: $('#hero').height()
}
});
}
affixChange();
setInterval(function(){
affixChange();
console.log($('#hero').height());
}, 1000)
Why is my method not working?
Is there a better way to do this?
Bootstrap gives you the possibility to pass a function to calculate the offset dynamically:
$('#navigation').affix({
offset: {
top: function() { return $('#hero').height(); }
}
});
Unfortunately if you need data-offset-top to be set dynamically you need to handle this manually. While domachine provides the correct answer I wanted to offer here a way to re-calculate the value on page resize and also to add a space holder so that affixing runs smooth e.g. no page jumping when the contents gets affixed. This was an issue for me.
It re-calculates data-offset-top dynamically
It sets the offset space dynamically. The space will replace affix when affixed
So I use the following HTML:
<div class="my-affix" data-spy="affix" data-offset-top-dynamic="true" data-content-space-holder="#my-affix-space-holder"></div>
<div id="my-affix-space-holder"></div>
The following CSS:
.my-affix + #my-affix-space-holder {
display: none;
}
.my-affix.affix + #my-affix-space-holder {
display: block;
}
And a JS script:
var $dynamicAffixes = $('[data-offset-top-dynamic]');
$dynamicAffixes.each(function(){
// data-target is used for the element that should be affixed while data-spy is used to have some scroll breakpoint
var $thisAffix = $(this);
var $thisAffixMarginPlaceholder = $($thisAffix.attr('data-content-space-holder'));
var currentAffixHeight = $thisAffix.outerHeight();
// Assign the affix height to content placeholder - to add a margin in the page because of missing content
$thisAffixMarginPlaceholder.css('height', currentAffixHeight);
// Initialize affix height where it should trigger to become sticky
$thisAffix.affix({
offset: {
top: Math.round($(this).offset().top)
}
});
$(window).on('resize', function(){
var isAlreadyAffixed = false;
// Restore affix to its original position if scrolled already so we can calculate properly
if ($thisAffix.hasClass('affix')) {
$thisAffix.removeClass('affix');
isAlreadyAffixed = true;
}
var currentAffixPosition = Math.round($thisAffix.offset().top);
var currentAffixHeight = $thisAffix.outerHeight();
$thisAffix.data('bs.affix').options.offset.top = currentAffixPosition; // a hack
$thisAffixMarginPlaceholder.css('height', currentAffixHeight);
if (isAlreadyAffixed) {
$thisAffix.addClass('affix');
$thisAffix.affix('checkPosition');
}
});
});
Have you tried monitoring the window for a resize event?
$(window).resize(function() {
affixChange();
});
I'm trying to create a popup box on a list of items that goes very much to the bottom of the browser.
I want the POPUP to be in the center of the page where the user is at regardless of how low they scrolled
i have to use POSITION ABSOLUTE not FIXED
but when i use POSITION ABSOLUTE the popup always appears on top and i know its due to my top: 0
.lightbox-container{
border: solid red 1px;
width: 100px;
height: 40px;
background: yellow;
position: absolute;
top: 0;
}
I want to use something like scrollTop or one of those to get the popup to always stay in the users viewpoint regardless of how low they scrolled
$('a').on('click', function(e){
var lightBox = $('<div class="lightbox-container"> <p>click to remove</p>');
lightBox.appendTo('body');
$('.lightbox-container').on('click', function(e){
$(this).remove();
});
});
here is the fiddle im working on http://jsfiddle.net/2RNAN/1/
I know there are other posts about this but im very new to jquery and cant seem to get it working.
This works working fiddle here
$('a').on('click', function (e) {
e.preventDefault();
var lightBox = $('<div class="lightbox-container"> <p>click to remove</p>');
lightBox.appendTo('body');
$('.lightbox-container').css('top', $(document).scrollTop() + 'px');
$('.lightbox-container').on('click', function (e) {
$(this).remove();
});
});
$(document).on('scroll', function () {
$('.lightbox-container').css('top', $(document).scrollTop() + 'px');
});
Edit: I think its a bit unclean and also unnecessary to center the pop-up box via jQuery. You can easily do this with CSS. Check out my updated JsFiddle: http://jsfiddle.net/kCC8p/9/ Edit End
I set the overflow to hidden on the body and included the pop-up outside the scrollable element. This way the scroll position of the user doesn't matter anymore.
JS
var lightbox = $('.lightbox-container');
$('a').click(function(e) {
e.preventDefault();
lightbox.show();
lightbox.addClass('open');
lightbox.append('<p>Click to remove</p>');
});
lightbox.click(function(e) {
lightbox.removeClass('open');
lightbox.find('p').remove();
$(this).hide();
});
See rest on jFiddle...
I may be a little late but I think this might be closer to what you were after:
Working Example
$(function () {
var lightbox = $('.lightbox-container'),
center = function () {
var T = $(window).height() / 2 - lightbox.height() / 2 + $(window).scrollTop(),
L = $(window).width() / 2 - lightbox.width() / 2;
lightbox.css({
top: T,
left: L
}).click(function () {
$(this).hide();
});
};
$('a').click(function (e) {
e.preventDefault();
lightbox.show().text('Click to remove');
center();
});
$(window).scroll(center);
$(window).resize(center);
});
Note that this method centers the popup and keeps it centered regardless of scrolling or re-sizing.
Are you avoiding the use of position fixed due to IE9 compatibility or some other reason? Using position fixed is probably the simplest answer and then address whatever compatibility issue you're having with specific browsers, such as with this answer for IE9 regarding quirks mode.
I have a div that scrolls content when the cursor is either at the top or bottom (scrolling up or down). I have two customized cursor images- one is supposed to show when the div content is scrolling up and the other when the div content is scrolling down. The script below was written by a stackoverflow member and works only when using standard cursor styles such as wait, pointer, etc. I want to use images, but cannot get it to work correctly. I also do not need the timer in the script below.
<script type='text/javascript' >
var top=0, timer;
$('#repertoirescroll').on('scroll', function() {
clearTimeout(timer);
var scrollTop = $(this).scrollTop(),
cursor = scrollTop > top ? 'pointer' : 'wait';
$('body').css('cursor', cursor);
top = scrollTop;
timer = setTimeout(function() {
$('body').css('cursor', 'default');
}, 500);
});
</script>
The image names I am using are
url(../images/arrowup.png)
url(../images/arrowdown.png)
*HTML/CSS**
.cursorup {
cursor: url(../images/arrowup.png), auto;
position:relative;
}
.cursordown {
cursor: url(../images/arrowdown.png), auto;
position:relative;
}
scrolling content
Thanks for any help in advance.
To use custom cursors, you use CSS styling:
.curarrowup {
cursor: url(../images/arrowup.png), auto;
}
Then to apply, use jQuery to apply the style:
$(myElement).addClass("curarrowup");
When you want to go back to a normal cursor:
$(myElement).removeClass("curarrowup");
Using $('body') (myElement === 'body') as in your example is fine.
One caveat: in Firefox, the new cursor often will not appear until you actually move the mouse. This is a known bug and I cannot find any workarounds.
Edit: Modifying your code:
var top=0, timer;
$('#repertoirescroll').on('scroll', function() {
var scrollTop, cursor;
clearTimeout(timer);
scrollTop = $(this).scrollTop();
cursor = scrollTop > top ? 'curarrowup' : 'curarrowdown';
$('body').addClass(cursor);
top = scrollTop;
timer = setTimeout(function() {
$('body').removeclass(cursor);
}, 500);
});