Remove Fixed Navigation Menu Bounce - jQuery? - javascript

A working demo of a template I've modified can be found at the following url:
https://newbloggerthemes.com/base-wp-blogger-template/demo/
I've been unable to determine what is causing a annoying bounce of the fixed navigation menu. If you scroll the page downward the menu should move upward and stop when its top border reaches the top of the page; however, it actually moves just past the top of the page and then snaps back, causing a annoying bounce.
How do I get rid of this bounce? I am assuming that this might be caused by the jQuery code used to query the menu's position. Its as if the code is fixing the issue afterward as opposed to preventing it from happening in the first place.
I've removed the header from the original template so that the menu initially appears at the top; however, when the user first scrolls the page downward the menu bounces in a similar fashion so the defect is in the original template and not due to any changes I've made.
I've posted the modified template at the url below in case the code below is not enough.
https://1drv.ms/t/s!AnHSMVz7JJ2Ocf9KoYS67t_6ZqI
jQuery(document).ready(function($) {
var $filter = $('.main-navigationbwrap');
var $filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});
if ($filter.size())
{
$(window).scroll(function ()
{
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
{
$filter.before($filterSpacer);
$filter.addClass("fix");
}
else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top)
{
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
}
});

Okay, you're done removed the header HTML.
Now you can also removed that jQuery. Becuase to make sure your menu navigation position always fixed at the top, you can do that just by CSS only. Example CSS is below.
.site-headerbwrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
in you case: paste CSS code above before ]]></b:skin> line and then Save your Template

Related

Scroll to bottom button behaviour when scroll is 100% bottom

I am using jquery-smooth-scroll for controlling anchor scrolling. There is a feature/option to decide behaviour after scroll. I chose to hide the button after it gets to the bottom anchor. I then implemented some jquery to bring that button back when scroll was no longer 100% at the bottom of the page.
What I am struggling to do is make sure that the button always fades away when scroll is 100% down. The same way a standard back to top works but opposite ends of the page in my case.
Please see this fiddle I have put together https://jsfiddle.net/k253jvt8/
/* show and hide button*/
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) {
if (document.body.scrollTop == 0) {
$('.saveForm').fadeIn();
//below isnt working to fade away .saveform when scroll is 100% bottom
} else {
$('.saveForm').fadeOut();
}
});
The above is the code I use to bring back the button after it disappears, but then cant get it to disappear again when manually scroll to the bottom, it only disappears again when I use the button to get to the bottom - have a play with my fiddle and you will see what I mean.
In your fiddle, your wrapping <div class="reportFormPage"> is positioned absolute in relation to the document.
As a result your <body> element does not take it in to account when determining its height; hence it always has a height value of 0. Because of this your 'else' condition never occurs.
Removing the position: absolute; css rule resolves this issue.
Try this
if ($(window).scrollTop() ==0) {
$('.saveForm').fadeIn();
} else if($(window).scrollTop() < $(document).height()) {
$('.saveForm').fadeOut();
}
});
along with removing position:absolute as dommmm has said.
Here is the working fiddle https://jsfiddle.net/sd6sh4v6/2/
See if you like the change I brought to your smoothScroll by using no-js fallback.

fixed header not getting right classes on scroll after closing fixed sidebar

I have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.
So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.
Below is the javascript for scrolling changes.
var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');
$(function () {
var position = $(window).scrollTop();
if (exploreOpen) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-open--header-full');
$('#wrapper-site-header').addClass('explore-open--header-reduced');
} else {
$('#wrapper-site-header').addClass('explore-open--header-full');
$('#wrapper-site-header').removeClass('explore-open--header-reduced');
}
position = scroll;
});
} if (exploreClosed) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-closed--header-full');
$('#wrapper-site-header').addClass('explore-closed--header-reduced');
$('#wrapper-site-header').addClass('SEEME123');
} else {
$('#wrapper-site-header').addClass('explore-closed--header-full');
$('#wrapper-site-header').removeClass('explore-closed--header-reduced');
}
position = scroll;
});
} else {}
});
The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.
I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..
$(function () {
var position = $(window).scrollTop();
if (('#explore').hasClass('open')) {
), and as separate functions.
Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/
Thank you all for your help and advice.
EDIT: Additional information.
I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.

Change class on scrolling menu, first click issue

I want to have scrolling one page menu that will have smaller height on scrolling (after certain point). Here is the code:
$(document).ready(function () {
var menu = $('.menuclass');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('.someclass').offset().top;
if (y >= z) {
menu.removeClass('nav1').addClass('nav2');
} else {
menu.removeClass('nav2').addClass('nav1');
}
});
});
Class nav1 has height 120px and class nav2 has height 60px
Everything works fine, except that, on first scrolling (click) to first anchor point, there is a problem that menu overlaps section like it still has 120px height instead of 60px that should have from new class. I suppose script already used first height to count. On second scrolling, problem disappears.
How can I add a size of 60px in script to be count even in first time of script activation?
Could you show your code in fiddle, with relevant CSS and HTML included?
JS code you posted shouldn't be a problem.
It was a conflict with sticky.js script for sticky menu. It was called on same div as script for changing classes. I removed it and problem disappeared. Instead I'm using css only, position: fixed; for menu.

"collapsing" position: fixed element using jquery

I'm trying to implement the effect the logo has in this page, where it is fixed on the top of the page, but when scrolling down, only a part of it remains visible, not the whole element.
I have found plenty of jquery plugins that will keep the top of an element at the top of the page, but none that will let me customize how high the element will stay. My javascript is not up to coding something from scratch. Does anyone have any suggestions for plugins that might be useful?
You shouldn't need a plugin for this. CSS can keep the logo fixed and you can use JavaScript to change the display of the element once the user begins to scroll the page.
Assuming that your logo has the ID of logo, the CSS would be:
#logo {
top: 0;
position: fixed;
}
Since it appears you're using jQuery, you can do something like this:
$(function() {
// gets a reference to the document based on which browser is being used
var oDoc = $.browser.msie === true ? window : document;
// event handler for when the user scrolls
$(oDoc).scroll(function() {
// if the user is at the top, display the whole image
if($(this).scrollTop() === 0) {
$('#logo').css('margin-top', 0);
// otherwise, pull the image up a single em (200 is arbitrary)
} else if($(this).scrollTop() > 200) {
$('#logo').css('margin-top', '-1em');
}
});
});

CSS Semi-fixed Element?

I remember seeing an example of this recently, but for the life of me I can't find the site.
It was a button or something similar that sat in its place near the top of the screen, then when you scroll down it stays on screen.
Now that I think about it, it must have been javascript-powered, but it looked really natural.
Does anyone know of a site with this functionality or information on how to do it?
EDIT
No, it wasn't just position:fixed or permanently floated using javascript.
Thanks durilai for pointing out that this has been covered: How to make an element slide with the viewport as it scrolls?
As it turns out, it was right here on SO (the question editing page) that I saw this. The "How to Format" box sits to the right of the editing box and moves with the rest of the page, but becomes position:fixed when it should be scrolled out of view.
This is done by SO using jQuery. I think they have some custom code there, but here is my implementation:
var scrollerTopMargin = $("#scroll-container").offset().top;
$(window).scroll(function(){
var c = $(window).scrollTop();
var d = $("#scroll-container");
if (c > scrollerTopMargin) {
d.css({ position: "fixed", top: "0px" });
}
else if (c <= scrollerTopMargin)
{
d.css({ position: "relative", top: "" });
}
});

Categories

Resources