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!

My waypoint function has undefined behaviour when the user refreshes the page after scrolling past it

I have a navigation bar and I've set its position to change to fixed when the user scrolls down past it and vice versa when the user scrolls up past that point by using the following waypoint:
var $navbar = $('.navbar-default');
$navbar.waypoint(function(){
if ($('#navigation-bar').hasClass('navbar')){
$('#navigation-bar').toggleClass('navbar-fixed');
} else{
($('#navigation-bar').toggleClass('navbar'));
}
}, { offset: '28%' });
This ensures the navbar stays on the users screen only past a certain point. This works as intended most of the time, however the issue is if the user scrolls down past that waypoint and then refreshes the page the navbar will jump back to its original position, which then causes undefined behaviour if you scroll back up past it.
Is there a way to ensure everything that is on the screen remains at that exact same spot when the user refreshes?

You can use the window.scrollTo function when the page loads
//scrollTo(x, y)
window.scrollTo(0, 0);
//the rest of your code...
This will scroll to the top-left of the page everytime the page loads.
Edit:
The answer from this question may also work:
* {
overflow-anchor: none;
}

Back to top link on longer pages with dynamic content

I have a slight problem with the way my pages work and the back to top link I am using.
The back to top link works well on static pages but if I reveal more content (dynamically making the page longer) it doesn't recalculate the height of the window. This must be a common problem - I suspect?
Here is the javascript for the back to top link generation:
// Affixes the "back to top" button
if ( (jQuery(window).height() + 200) < jQuery(document).height() ) {
jQuery('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 200
}
});
}

I have just realised that this method is a bit flawed. Instead I opted for some code that uses the scroll function rather than trying to determine the window/document height. Works much better:
http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

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);
}
})

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/

I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!