I am a newbie on jquery, and I want the div to hang on top of the screen when the page scrolldown is more than 50, how can I achieve this?
I want the div to be always absolute and not fixed.
http://jsfiddle.net/8UCcY/
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".articlebutton").css("top", "0px"); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
} else {
$(".articlebutton").css("top", "-50px");
}
});
});
You can set it to position top -100 since it is -50 and scroll occurs after 50:
$(".articlebutton").css("top", ($(window).scrollTop()-100)+"px");
Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() <= 50) {
$(".articlebutton").css("top", $(window).scrollTop() - 50); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
} else {
$(".articlebutton").css("top", $(window).scrollTop() - 100);
}
});
});
Fiddle
DEMO
Try this
$(document).ready(function () {
var top = $(".articlebutton").css('top');
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".articlebutton").animate({
"top": $(window).scrollTop() + "px"
}, 400);
} else {
$(".articlebutton").animate({
"top": top
}, 400);
}
});
});
Hope this helps,thank you
You can do something like this on that line:
$(".articlebutton").css("top", $(window).scrollTop());
Or event better, use a position: fixed; top: 0;
Why not simply set a position:fixed; for the div? That way it will always be at the top anyways. See the css below
.articlebutton div
{
position:fixed;
top:0;
}
make the property of div as
div{
position : fixed;
top : 0px;
}
it will make you div always stay on top.. no matter how much you scroll the page
The following code is taken from https://deltafrog.com/create-floating-div-jquery/
jQuery('document').ready(function(){
if(jQuery('.right').length){
jQuery(window).scroll(function(){
var win_width=jQuery(window).width();
if(win_width>1200){
var topoffset=jQuery('.right').offset().top;
var leftoffset=jQuery('.right').offset().left;
var botoffset=jQuery('footer').offset().top;
var block_height=jQuery('.floating-block').height();
botoffset=botoffset-block_height-250;
topoffset=topoffset-200;
var sTop=jQuery(window).scrollTop();
var top_fix_to_abs=botoffset-topoffset;
if(sTop < topoffset){
jQuery('.floating-block').removeClass('curr_fix');
jQuery('.floating-block').removeClass('right_fix');
jQuery('.floating-block').css('top',"");
jQuery('.floating-block').css('left',"");
console.log('h1');
}
if(sTop > topoffset && sTop<botoffset){
jQuery('.floating-block').addClass('curr_fix');
jQuery('.floating-block').addClass('right_fix').css('left',leftoffset);
jQuery('.floating-block').css('top',"");
console.log('h2');
}
if(sTop >=botoffset && sTop>topoffset){
jQuery('.floating-block').removeClass('curr_fix');
jQuery('.floating-block').css('left',0);
jQuery('.floating-block').css('top',top_fix_to_abs);
console.log('h3');
//return;
}
}
});
}
});
Related
need some help.
My setup:
I have a fixed Div ("myFixedDiv") that remains in place when scrolling till
"myFixedDiv" reaches another div ("footer"). Then it moves with scrolling.
The Div "myFixedDiv" is placed next to a div ("text") using: display:inline-block.
Now for my problem:
When the window is horizontally made smaller, "myFixedDiv" is vertically placed after "textDiv" as intended. Only thing is, the upper-half of "myFixedDiv" visibly overlaps "textDiv", covering part of the text. I want "myFixedDiv" to be vertically placed after "textDiv" by pushing "footer" down to allow for this.
See an example here:
JSFIDDLE
You may need to give a little scroll to make "myFixedDiv visible again after making the window smaller.
$(document).scroll(function() { var $self = $("#myFixedDiv"); $self.css('margin-top', 0); var myFixedDivOffset = $self.offset().top + $self.outerHeight(true); if (myFixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); } });
Change fixed position to relative position of the div when you resize the window and it should be good
See this fiddle
$(window).resize(function() {
$("#myFixedDiv").css('position','relative');
});
You can also add a condition based on the width of the body to change the CSS of the div to relative or fixed position.
Solved it:
$(document).scroll(function() {
var $self = $("#myFixedDiv");
$self.css('margin-top', 0);
var myFixedDivOffset = $self.offset().top + $self.outerHeight(true);
if (myFixedDivOffset > ($("#footer").offset().top - 30)) {
$self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top));
} else {
$self.css('margin-top', '30px');
}
});
$(window).resize(function() {
if ($(window).width() < 601) $("#text").css('padding-bottom', '70px'); {
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
}
});
$(window).resize(function() {
if ($(window).width() > 600) $("#text").css('padding-bottom', '0'); {
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
}
});
I have a header which position:absolute on load I need to display it fix on particular scrolling so it working ..
but problem is that how I use header effect (i.e display with delay from upward) with position:fixed property.
code:
CSS
.iaw-header {
position:absoulte
}
JS:
{
if (jQuery(window).scrollTop() >= 700) {
jQuery('.iaw-header').css('position','fixed');
});
}
HTML
<div id="header">
Header text here.
</div>
CSS
.header { position: absolute; }
JS
if (jQuery(window).scrollTop() >= 700) {
$('#header').css('top', '-300px');
$('#header').css('position', 'fixed');
$('#header').animate({top: 0}, 1000);
} else {
$('#header').animate({top: '-300px'}, 1000, function () {
$('#header').css('top', 0);
$('#header').css('position', 'absolute');
});
}
So when the site loads (in CSS), the header can have top: -300px;, and when the user scrolls, you transition (or set) the header's top to 0px, so it scrolls down from the top.
$(window).scroll(function () {
var i = $('.iaw-header')
var h = i.outerHeight(true);
if ($(window).scrollTop() > h) {
if (!i.hasClass('fixed')) i.hide().addClass('fixed');
}
if ($(window).scrollTop() >= 400) {
i.slideDown('fast');
} else {
i.removeClass('fixed').show();
}
});
Add a class in your style:
.fixed {position: fixed;top:0; left:0;width: 100%; }
Perhaps, not the best code but still you can start building on it and modify to make it better. Here is the Jsfiddle link :http://jsfiddle.net/lotusgodkk/gxRC9/200/
I use a simple script for a sticky nav header but I Wonder to know how can I add a condition for smaller screen. So here is the script:
$(document).ready(function() {
var aboveHeight = $('#top_menu').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('.menu').addClass('fixed').css('top','0').next().css('padding-top','100px');
}
else {
$('.menu').removeClass('fixed').next().css('padding-top','30px');
}
});
});
I'd like to change the value of the addClass padding-top (on the 5th line) from 100px to 30px for screen smaller then 600px width. Something like:
if (window.width <= 600)
Hope you understand my request caus my English is not very good :p Thank you all in advance for any help.
You can store and set the padding-top value based on the window.innerWidth value like below:
$(document).ready(function() {
var aboveHeight = $('#top_menu').outerHeight(),
windowWidth = window.innerWidth,
menuPaddingTop = '100px';
// Add additional statements to this if needed
if (windowWidth <= 600) {
menuPaddingTop = '30px';
}
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('.menu').addClass('fixed').css('top','0').next().css('padding-top', menuPaddingTop);
}
else {
$('.menu').removeClass('fixed').next().css('padding-top','30px');
}
});
});
I'm using the code below to show a banner once users reach the bottom of the screen. Issue is that I noticed that most users don't scroll down till the end. What should I modify to show my div .banner3 at, let's say, 150px from the bottom?
Many thanks
$(document).ready(function() {
$(window).scroll(function() {
if($("body").height() <= ($(window).height() + $(window).scrollTop())) {
$(".banner3").fadeIn()
} else {
$(".banner3").css("display","none");
}
});
});
$(window).height() + $(window).scrollTop() - 150
Easy stuff :)
You could also perhaps rewrite the code a bit nicer. The scroll event is fired many times, so you could do some caching of the selector.
$(function() {
var banner = $(".banner3");
var bodyHeight = $("body").height();
$(window).scroll(function() {
if (bodyHeight <= $(window).height() + $(window).scrollTop() - 150) {
banner.fadeIn();
} else {
banner.hide();
}
});
});
edit: forgot to hide the banner again...
http://jsfiddle.net/kasperfish/RBndE/1/
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() > $(window).height()-150){
$('.banner').fadeIn();
}else{
$('.banner').fadeOut();
}
});
});
my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks
You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.
Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});