can someone please help me debugging my jquery scrolling up hiding the div
here is my javascript code
jQuery(function() { // document ready
var sideBarTop = $('#sticky').offset().top; // position top
var sideBarLeft = $('#sticky').offset().left //position left
jQuery(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns scroll from top
if(sideBarTop < windowTop) {
$('#sticky').css({position: 'fixed', top: 210, left: sideBarLeft}).fadeIn();
}
else {
$('#sticky').css('position', 'static').fadeOut("slow");
}
});
});
here is my html code
<div id="sticky">
<ul id="nav">
<li class="current">Avant</li>
<li>Allure</li>
<li>Eden</li>
</ul>
</div>
please someone help me
JSFiddle
Updated HERE.
Include below line.
jQuery(function() { // document ready
var sideBarTop = $('#sticky').offset().top; // position top
var sideBarLeft = $('#sticky').offset().left //position left
jQuery(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns scroll from top
if(sideBarTop < windowTop) {
$('#sticky').css({position: 'fixed', top: -40}).fadeIn("slow");
}
else $('#sticky').css('position', 'static').fadeOut("slow");
setTimeout ( function() { $('#sticky').fadeIn("slow"); },1000);
});
});
This is a patch for your existing code and it is not a recommended fix for you problem.
Related
I'm trying to get the correct scroll direction via jQuery's "scroll" event.
For this, I'm using the solution here: https://stackoverflow.com/a/4326907/8407840
However, if I change the direction of my scroll, the offset returned by scrollTop is incorrect on the first time. This results in the following behavior:
Wheel down -> down
Wheel down -> down
Wheel up -> down
Wheel up -> up
Wheel down -> up
Wheel down -> down
... and so on, I think you get it.
var ACTIVE_SECTION = null;
var ANIMATION_DURATION = 700;
$(document).ready(function() {
ACTIVE_SECTION = $("section:first-of-type").get(0);
var prevPosition = $(window).scrollTop();
$(window).on("scroll", function() {
doScrollingStuff(prevPosition);
});
});
function doScrollingStuff(prevPosition) {
var ctPosition = $(window).scrollTop();
var nextSection = ACTIVE_SECTION;
// Remove and re-append event, to prevent it from firing too often.
$(window).off("scroll");
setTimeout(function() {
$(window).on("scroll", function() {
doScrollingStuff(prevPosition);
});
}, ANIMATION_DURATION + 100);
// Determine scroll direction and target the next section
if(ctPosition < prevPosition) {
console.log("up");
nextSection = $(ACTIVE_SECTION).prev("section").get(0);
} else if(ctPosition > prevPosition) {
console.log("down");
nextSection = $(ACTIVE_SECTION).next("section").get(0);
}
// If a next section exists: Scroll to it!
if(typeof nextSection != 'undefined') {
var offset = $(nextSection).offset();
$("body, html").animate({
scrollTop: offset.top
}, ANIMATION_DURATION);
ACTIVE_SECTION = nextSection;
} else {
nextSection = ACTIVE_SECTION;
}
console.log(ACTIVE_SECTION);
prevPosition = ctPosition;
}
section {
width:100%;
height:100vh;
padding:60px;
box-sizing:border-box;
}
section:nth-child(1) { background:#13F399; }
section:nth-child(2) { background:#14FD43; }
section:nth-child(3) { background:#4EE61E; }
section:nth-child(4) { background:#BEFD14; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sect1">Section 1</section>
<section id="sect2">Section 2</section>
<section id="sect3">Section 3</section>
<section id="sect4">Section 4</section>
Here's a pen, where you can see my implementation: https://codepen.io/EigenDerArtige/pen/aVEyxd
I am trying to accomplish an autoscroll to the next or previous section, whenever the user scrolls or swipes up/down... Therefore I only fire the "scroll"-event once every second, to prevent multiple scrolljacks all happening at once... However the above behavior seems to result in the user being scrolled to the wrong section.
I've been trying for a couple of hours now to get it working, but to no avail. Help is greatly appreciated!
The problem lies in the assignment prevPosition = ctPosition.
Each time the scroll handler runs, var ctPosition = $(window).scrollTop(); is good for determining scroll direction, however it's not the value that should be rememberad as prevPosition.
prevPosition needs to be $(window).scrollTop() as measured after the animation has completed.
Try this :
$(document).ready(function() {
var ANIMATION_DURATION = 700;
var ACTIVE_SECTION = $("section:first-of-type").eq(0);
var prevPosition = $(window).scrollTop();
$(window).on("scroll", doScrollingStuff);
function doScrollingStuff(e) {
$(window).off("scroll");
var ctPosition = $(window).scrollTop();
var nextSection = (ctPosition < prevPosition) ? ACTIVE_SECTION.prev("section") : (ctPosition > prevPosition) ? ACTIVE_SECTION.next("section") : ACTIVE_SECTION; // Determine scroll direction and target the next section
// If next section exists and is not current section: Scroll to it!
if(nextSection.length > 0 && nextSection !== ACTIVE_SECTION) {
$("body, html").animate({
'scrollTop': nextSection.offset().top
}, ANIMATION_DURATION).promise().then(function() {
// when animation is complete
prevPosition = $(window).scrollTop(); // remember remeasured .scrollTop()
ACTIVE_SECTION = nextSection; // remember active section
$(window).on("scroll", doScrollingStuff); // no need for additional delay after animation
});
} else {
setTimeout(function() {
$(window).on("scroll", doScrollingStuff);
}, 100); // Debounce
}
}
});
I have a fixed div that follows the page when it scrolls past the top of the page.
I would like it to stop scrolling once it reaches the bottom of a particular div. I am not great with javascript.
Basically needs to remove the class .affix. But it might need an offset so that it doesn't overlap into the layout below.
I have looked at other articles but the div starts off fixed whereas mine becomes fixed.
JSfiddle: https://jsfiddle.net/8t1ddL2h/
Javascript:
var stickySidebar = $('.sticky-sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$('.sticky-sidebar').addClass('affix');
}
else {
$('.sticky-sidebar').removeClass('affix');
}
});
Any help would be appreciated
Lee
Try this Fiddle
$(document).ready(function() {
var $sticky = $('.sticky-sidebar');
var $stickyrStopper = $('.other-content');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
You can also try it just add JavaScript. it will automatic calculate height of left panel. you need to change in css when it remove the css.
var othercon = $('.other-content').offset().top;
var sliderheight = $( ".sticky-sidebar" ).height();
$(window).scroll(function() {
if ($(window).scrollTop() >= othercon-sliderheight) {
$('.sticky-sidebar').removeClass('affix');
// need to change here according to your need
}
});
I have a main header (#top-bar) with page navigation and a sub-navigation bar (#category-bar) with links to sections on the page. The sub-navigation bar loads on the bottom of the screen, then as the user scrolls down the sub-navigation bar pushes the fixed position main header off screen by changing it to absolute position. The sub-navigation bar becomes fixed to the top. This all works fine with waypoints js triggering different position states for the bars.
I now need to have the main header reappear on scroll up. Here is my javascript so far, though it does not effect the header on scroll up:
function moveHeader() {
var topBar = '#top-bar',
var stickyElement = jQuery('#category-bar');
var bottomBarOffset = stickyElement.offset();
var topOffset = jQuery(topBar).offset().top; //get the offset top of the element
jQuery(stickyElement).waypoint({
handler: function(direction) {
if (direction === 'down') {
jQuery(topBar).css({ position: 'absolute', top: bottomBarOffset.top - jQuery(topBar).outerHeight() });
}
else {
jQuery(topBar).attr('style', '');
}
},
offset: topBarHeight - 1,
});
jQuery(topBar).waypoint({
handler: function(direction) {
if (direction === 'up') {
jQuery(this.element).addClass('pin');
}
else {
jQuery(this.element).removeClass('pin');
}
},
offset: topOffset - jQuery(window).scrollTop() - 100, //attempt to trigger main header pushed off screen top
});
}
I have tried different calculations to trigger the #top-bar without any luck. Does anyone have advice for the calculation or different approach for this project?
After reading more related SO topics and some tests with waypoints js, I abandoned waypoints js for this portion of the script. I created a function for calculating the trigger point for setting the fixed header. The variable calculation constantly changed on scroll up, which caused waypoints to continually fire and create a flickering effect. This made me realize that this implementation is not the proper use for waypoints. My solution implements a simple scroll up / scroll down jQuery function after leaving the top section. In this script, it is set to fire on a 20 pixel scroll in either direction:
function moveHeader() {
var topBar = '#top-bar',
var stickyElement = '#category-bar';
var bottomBarOffset = jQuery(stickyElement).offset();
var topBarOffset = jQuery(topBar).offset().top;
jQuery(stickyElement).waypoint({
handler: function(direction) {
if (direction === 'down') {
jQuery(topBar).css({ position: 'absolute', top: bottomBarOffset.top - jQuery(topBar).outerHeight() });
}
else {
jQuery(topBar).attr('style', '');
}
},
offset: topBarHeight - 1,
});
jQuery(function(){
var lastScrollTop = 0;
var scrollDistance = 20;
if (jQuery('body').hasClass('page-template-page-sections-menu')) {
jQuery(window).scroll(function(event){
var st = jQuery(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= scrollDistance)
return;
if (st > lastScrollTop && st > windowHeight && jQuery('body').hasClass('scroll-up'))
{
// downscroll code
jQuery('body').addClass('scroll-dn');
jQuery('body').removeClass('scroll-up');
jQuery(stickyElement).attr('style', '');
} else if (st < lastScrollTop && st > windowHeight)
{
// upscroll code
jQuery('body').addClass('scroll-up');
jQuery('body').removeClass('scroll-dn');
jQuery(topBar).attr('style', '');
jQuery(stickyElement).attr('style', '');
} else if (st < lastScrollTop && st < windowMinusTop)
{
// upscroll and first section (window height from top of document)
jQuery(stickyElement).css({ 'z-index': '0' });
jQuery('body').removeClass('scroll-up scroll-dn');
}
lastScrollTop = st;
});
};
});
}
This solution achieves what my client needs, though I am open to any further improvements.
Using my code at:
http://jsfiddle.net/Pd7nm/
I want the sidebar to stop scrolling with the page at a certain point but it just keeps on going. I have tried multiple things and its not working.
This is the Javascript Method thingy
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#side').followTo(250);
Updated JQuery Fiddle is here
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height>250){
$(".sidebar").css({"position":"fixed","top":0});
}
});
See This demos I have removed in "br" tag
Demos - jsfiddle.net/Nu3eu/1/
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!