Develop Reference

Want to change sticky sub nav position on window resize depending on header height

I'm very unfamiliar and still learning javascript/jQuery and I'm having trouble putting together the syntax to change a secondary navigation bar offset position to stick to a header that adjusts its size when the screen size changes (logo is setup to viewpoint percentage, hence its height varies with screen size).
So far I got the first part of the following script to calculate the header outerHeight and it works on any screen size but only on the first page load (not while resizing in real time).
jQuery(document).ready(function resizeHeader ($){
$('#CPOP-header').each(function(){
$('#CPOP-sticky-sub-menu').css({
'top' : $(this).outerHeight(true) + 'px'});
});
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
});
However, I want it to "monitor" browser window resize dynamically to avoid browser refresh but I can't figure out how to bind or merge the second part on the same script since I'm not very familiar with javascript/jQuery:
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
This is for a WordPress/Elementor website, the code will be inserted in an HTML widget.
Any help will be much appreciated!

if anyone is looking for something similar, here it is
const $ = jQuery;
function resizeHeader () {
$('#CPOP-header').each(function(){
$('#CPOP-sticky-sub-menu')
.css({'top' : $(this).outerHeight(true) + 'px'})
});
}
jQuery(document).ready(resizeHeader);
$(window).on('resize',resizeHeader);
Thank you to u/toi80QC at reddit for taking the time and giving a hand!

Make a second Navigation appear on page scroll

I have two navigations on my site, they are both on the top and essentially do the same thing.
I want the main (smaller) navigation to appear on the page when the page originally loads and it hasn't been scrolled on.
Once the page scrolls and the main navigation is no longer visible, I want the secondary navigation (larger) to appear and be fixed to the top of the page.
I already have the fixed to top portion worked out, I just need help with the fading in and out on the page scroll part.
The main Navigation has an id of: navMain
The Second Navigation has an id of: navSecondary
I found this script on Stackoverflow but it doesn't seem to be doing exactly what I want.
$(window).scroll(function() {
var pxFromBottom = 350;
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
$('#navSecondary').fadeOut('slow');
} else {
$('#navSecondary').fadeIn('slow')
}
});
This script allows both navigation menues to appear at the same time when the page originally loads and once you scroll the page the secondary navigation fades away and never comes back even if you scroll back to the top of the page.
If you want to you can see exactly what I'm talking about here:
http://www.green-panda.com/contact.php

How to jump to certain position of scrolled element without scrolling the main screen?

I have a container (div) on the page. This container has a scrolling (provided by overflow:auto; height:400px).
I need no provide a URL, that will open a page so that the main page will not be scrolled, but the text in the container will be scrolled.
I tried www.mysite.com#position, but by this way the main page is scrolled too (and I need, that users will see the header on the top of the screen, and the "#position" position on the top of the container)

This is possible with javascript. And I will show a jQuery example here.
if (window.location.hash == '#position') {
$('#containerDiv').animate({
scrollTop: $("#actual_position").offset().top
}, 2000);
}
The actual_position should be the place where to scroll to. position should just be in the url and not on the page, to prevent the whole page from scrolling.

May you use the css-properties: position:fixed, top:..., left:... for your element that should stay at a certain place on your side, when an user scrolls.
Furthermore you can put all content that you do not want to be scrolled into a div and define the css-properties.
I hope this helps you a little bit.

Really it's an upgrading of Arjan answer (and now this really works).
As Arjan's suggestion the script will not work every time, but only by providing #scroll in the end of url (www.mysite.com#scroll). This script will scroll the container scroll bar to the #position element, and the all document will stay.
jQuery(window).load(function(){
container_top = jQuery('#container').offset().top;
element_top = jQuery('#position').offset().top;
element_relative_top = element_top -container_top;
if (window.location.hash == '#scroll') {
jQuery('#container').animate({
scrollTop: element_relative_top
}, 2000);
}
})

How to create a dynamic navigation bar which follows you when you reach certain location

I want to create a navigation bar similar to this site's:
http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html
Can anyone tell me how to create that navigation bar, which follows you as you scroll the page down, but not following you at the initial loading of page?
When you access to the given website, try to scrolling down and you will understand what I am talking about. The navigation bar that consists of MY SHOP, OFFERS, IDEAS & LIFESTYLE, BAKERY and so-on...
I have really no idea what it's called. At least tell me what it's called, so I'll be able to search.
Here is the solution I've done
window.onscroll = function(){
if(getScrollTop()>140) {
document.getElementById("menu").style.position="fixed";
} else {
document.getElementById("menu").style.position="";
}
}
function getScrollTop() {
if (window.onscroll) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}

Holding an element on same position can be achieved by fixed position styling.
If you want your navigation bar to stay on exact same location, position:fixed; is enough. (At least non IE6)
You can find a working example and some details here
However, if you want your navigation bar to move from it's initial location to the top border of page as you scroll the page down, you must implement some JavaScript to catch page scroll event and move the <div> accordingly.
See this question for an example on how to do that.

Note: this won't work with the Android 2.3 browser; position:fixed will not behave as expected - it kinda of temporarily attaches its position to the scrolling element before jumping back to the top.

if you want you could just set the z-index to be a specific No. and that should work.
example
z-index:100;

Use Javascript to create a space at the bottom of page for toolbar widget

I am creating a toolbar widget that is loaded via an external javascript file. The toolbar floats at the bottom of the screen, which works fine, but the content at the bottom of the screen gets covered up (as seen in Figure A). Figure B is my goal.
The toolbar should always be visible, fixed to the bottom of the screen. If scrolling is needed on the page, the content will flow under it until it is all visible when scrolled all the way to the bottom, so that nothing gets covered up on any length page.
My first thought was to set a bottom margin of 30px (toolbar height), but since most of the websites this is designed for are setup to use the full screen (with body height set to 100%), this won't always work. Decreasing the body scrollHeight by 30px fixes this issue, but only if scrolling isn't required on the page (which sometimes is).
JSFiddle example: http://jsfiddle.net/ZbMDr/1/

Does this example work for you? http://limpid.nl/lab/css/fixed/footer

So here's a somewhat hacky solution I've come up with, that seems to work so far (I haven't done extensive testing yet). If anyone has a cleaner way of accomplishing this it would be interesting.
var bodyCH = document.body.clientHeight,
bodySH = document.body.scrollHeight;
/* insert the toolbar here */
if (bodyCH === bodySH) {
document.body.style.height = parseInt(bodySH, 10) - 30 + 'px';
} else {
var spacer = document.createElement('div');
spacer.style.height = '30px';
document.body.appendChild(spacer);
}