I have a sticky menu that appears when a user scrolls down 500px from the top of the view. I'd like to have it also hide when the user scrolls down to 500px from the bottom.
Thanks in advance.
var stickTop = $('.sidebar-stick').offset().top + 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop ) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});
One solution would be to calculate both limits from top and bottom (not only top), and then add the bottom limit to the condition:
var stickTop = $('.sidebar-stick').offset().top + 500;
var stickBottom = $(document).height() - 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop && $(window).scrollTop() < stickBottom) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});
Depending on the effect that you want to create, you may want to take into account the window height too.
Related
I want to add a class to $ ('# header') when my web page scrolls down by 100px
this is the code :
$(window).scroll(function(){
var offset = $(window).offset();
if (offset.top > 100) {
$('#header').addClass('header2')
}
else {
$('#header').removeClass('header2')
};
});
#JQueryCode
Please use below mention code
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
if (scroll >= 50) {
//console.log('a');
$("#header").addClass("header2");
} else {
//console.log('a');
$("#header").removeClass("header2");
}
});
Currently I detect when I am at the bottom of the page.
I have a input hidden on the html, and when you scroll to the bottom, the input gets +1, but, when you get to the bottom, it adds alot of numbers.
How I add only +1 and it doesn't get alot of +1?
function finalPage() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() -500) {
loadMore();
}
});
}
var num = $("#page").val();
num++;
$("#page").val(num);
Try this:
function finalPage() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() -500) {
loadMore();
$("#page").val($("#page").val()+1);
}
});
}
When user scrolls past 10px from the top, I'd like to hijack their scroll and scroll them down to certain div. After this happens once, I'd like to release the scroll to be free to scroll wherever. How do I do this?
My current code works but it won't let user to scroll freely after that initial scroll:
$(window).scroll(function() {
//if I scroll more than 1000px...
if($(window).scrollTop() > 10){
$('html,body').animate({scrollTop : $('#main').offset().top}, 900, function(){
h = 2;
});
}
});
Try:
var scrolled = false;
$(window).scroll(function() {
//if I scroll more than 1000px...
if($(window).scrollTop() > 10 && scrolled == false){
$('html,body').animate({scrollTop : $('#main').offset().top}, 900, function(){
h = 2;
});
scrolled = true;
} else if($(window).scrollTop() == 0) {
scrolled = false;
}
});
I have a floating div on the sidebar that scrolls with the page. Is there a way to add code that makes it stop when it reaches the footer?
See code in action: http://openbayou.staging.wpengine.com
jQuery code used to float div:
$j=jQuery.noConflict();
$j(document).ready(function($) {
//this is the floating content
var $floatingbox = $('#one');
if($('#primary').length > 0){
var bodyY = parseInt($('#primary').offset().top) - 20;
var originalX = $floatingbox.css('margin-left');
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css('position') == 'fixed';
if($floatingbox.length > 0){
$floatingbox.html();
if ( scrollY > 1561 && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
top: 10,
});
} else if ( scrollY < 1561 && isfixed ) {
$floatingbox.css({
position: 'relative',
top: 0,
});
}
}
});
}
});
Why not just set the z-index of the sidebar behind the z-index of the footer?
EDIT: I didn't like the result of this so I went and made this work in jquery the way you want it...
try this for your scroll function:
$(window).scroll(function () {
floatingbox = $("#one");
if(floatingbox.length > 0){
//get our current scroll position
var scrollY = $(window).scrollTop();
//get the position of the tag cloud relative to the document
var contentY = ($("#sidebar .sidebar-tag-cloud").offset().top + $("#sidebar .sidebar-tag-cloud").outerHeight(false));
//calculate the largest possible top margin size before it starts to overlap the footer
var lastY = $("#footer").offset().top - $("#one").outerHeight(false);
//check if our scroll location is past the bottom of the tag cloud
if ( scrollY > contentY )
{
//check if the current top position is less than the maximum position
if(floatingbox.offset().top<lastY)
{
//keep scrolling
floatingbox.stop().animate({"marginTop":scrollY-contentY});
}else
{
//check if we have scrolled back up and have a space at the top
if(scrollY<floatingbox.offset().top)
{
floatingbox.stop().animate({"marginTop":scrollY-contentY});
}else
{
// hard set to the maximum position
floatingbox.stop().css({"marginTop":lastY-contentY});
}
}
}
}
});
I also made it a little more dynamic by getting the location of the bottom of the tag cloud and using that instead of your hard-coded number.
Alright, after looking at your latest jsfiddle. I have modified that code to work with yours. http://jsfiddle.net/Tgm6Y/4430/ This will not have the animate lag and should work well for you.
$('#one').followTo('#two','#pointFive');
just replace #two with #footer and #pointFive with "#sidebar .sidebar-tag-cloud" and this should work in your code.
UPDATE: Found a solution to my problem.
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#one').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop() + 20;
if (y >= top) {
$('#one').addClass('fixed');
}
else {
$('#one').removeClass('fixed');
}
// don't overlap the footer - pull sidebar up using a negative margin
footertotop = ($('#footer').position().top);
scrolltop = $(document).scrollTop() + 760;
difference = scrolltop - footertotop;
if (scrolltop > footertotop) {
$('#one').css('margin-top', 0 - difference);
}
else {
$('#one').css('margin-top', 0);
}
});
}
});
What this does is it stops before the footer and I can configure the stopping point.
I appreciate all the help in solving my problem!
$(function() {
$(document).scroll(function() {
var windowscroll = $(this).scrollTop();
if($(window).scrollTop() >= 900)
{
$("#scrollhome").css("opacity",(1-($(window).scrollTop()-900)/75))
}
else
$("#scrollhome").css("opacity",1)
if(windowscroll > 900 && windowscroll < 1300)
{
$("#scrollabout").css("opacity",($(window).scrollTop()-900)/75)
}
else
$("#scrollabout").css("opacity",0)
if(windowscroll > 1200 && windowscroll < 1500)
{
$("#scrollabout").css("opacity", (-1($(window).scrollTop()-1200)/75))
$("#scrolldesign").css("opacity",($(window).scrollTop()-1200)/75)
}
else
$("#scrolldesign").css("opacity",0)
});
});
the first overlap between scrollhome and scrollabout works nice but when it comes to the second overlap between scrollabout and scroll design i don't know how to hide the scrollabout funktion in a smooth way again, i need help! how can i make the scrollabout hidden again using scrolltop?
you misstyped it as -1($(window)...... it should also be 1-($(window)