We Keep Coding

How to display a scrolled navbar when page refresh?

So I got this script :
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
});
});
It makes the navbar fixed on scroll and clone logo and reset it on top page.
But if I refresh page at the middle, navbar isn't displayed cause it displays only on scroll.
Is there a way to fix that please?
Thanks.

As evolutionxbox suggested you should move your code into a function and call it both on scroll and on load like this:
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
myScroller();
$(window).scroll(function() {
myScroller();
});
function myScroller(){
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
}
});

Scroll a specific element inside container using JS or jQuery

I have huge sidebar element and when the page is scrolled sidebar point to the current element that is in a viewport. But sometimes active element is out of sidebar visible space i.e below or above borders. And then the user needs to scroll manually to be able to see active element.
I want to try use logic for determining if the active element is out sidebar visible space and auto scroll if needed.
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var container = $('#sectionMenu');
var containerHeight = container.height();
$(data).each(function () {
var topDistance = $(this).offset().top - 250;
var id = $(this).attr('id');
var elem = $('#_' + id);
if ((topDistance) < scrollTop && (topDistance + $(this).height() * 0.95) > scrollTop) {
if (autoScrollFlag) {
if (!elem.hasClass('sideBarActive')) {
var scrollPosition = elem.offset().top - container.offset().top;
removeActiveMenuItems(data);
elem.addClass('sideBarActive');
if (containerHeight < scrollPosition) {
// TODO automated scroll
}
}
}
autoScrollFlag = 1;
}
});
});

The solution that has worked for me was like this.
if (containerHeight < scrollPosition) {
container.animate({
scrollTop: '+=100px'
}, 800);
}

How to stop scroll when dynamic div ends

I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});

Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>

I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});

Sticky Nav Sticks Too Late

I'm creating a page with sticky nav and it doesn't stick to the top immediately after the header image moves away (it's less than full page size). It only sticks after the size of one full page image has passed. The text inside the nav bar also moves after it sticks.
You can view the code here: https://jsfiddle.net/zinctan/7a436ojz/
This is my javascript:
$(function() {
// when we scroll down the window, do this:
$(window).scroll(function(){
//Getting the scroll percentage
var windowHeight = $(window).height();
var scrollHeight = $(window).scrollTop();
var scrollPercentage = (scrollHeight / windowHeight);
console.log(scrollPercentage);
// if we have scrolled past 200, add the alternate class to nav bar
if(scrollPercentage > 1) {
$('.navHighlighter').addClass('scrolling');
} else {
$('.navHighlighter').removeClass('scrolling');
}
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 80
}, 1000);
return false;
}
}
}); // code courtesy of CSS-Tricks
// apply the class of nav-active to the current nav link
$('a').on('click', function(e) {
e.preventDefault();
$('li.nav-active').removeClass('nav-active');
$(this).parent('li').addClass('nav-active');
});
// get an array of 'href' of each a tag
var navLink = $('ul.navHighlighter a');
console.log(navLink);
var aArray = [];
for(var i = 0; i < navLink.length; i++) {
console.log(i);
var aChild = navLink[i];
var navArray = $(aChild).attr('href');
console.log(navArray);
aArray.push(navArray);
console.log(aArray);
var selector = aArray.join(" , ");
console.log(selector);
}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
var tops = [];
$(selector).each(function(){
var top = $(this).position().top - 90;
if(scrollTop > top) {
var id = $(this).attr('id');
$('.nav-active').removeClass('nav-active');
$('a[href="#'+id+'"]').parent().addClass('nav-active');
}
tops.push(top);
});
});
});
Any help would be useful! Thank you :)

First of all it is a good practice to use:
$(document).ready(function(){
});
and then write your jQuery code in that function in order to assure that your script code will run after your html web page is fully loaded.
Now, I think that that should work:
$(document).ready(function() {
var topDist = $(".navHighlighter").position(); //save the position of your navbar, better use an id for that
$(document).scroll(function () {
var scroll = $(this).scrollTop();
if (scroll > topDist.top) { //when the scrolling reaches the very top of your navbar
$('.navHighlighter').addClass('scrolling');
} else {
$('.navHighlighter').removeClass('scrolling');
}
});
*rest of your code goes here*
});
Also, add:
top:0;
width: 100%;
to your .scrolling class in order to command your navbar to start just at the top of the user's window and to cover the whole width of the web page (position:fixed creates some issues on that so you have to set the width of your element, remember that).
I hope I helped and I got your demands right. Happy coding! :)

Scroll div until top of footer

i've been looking for this for a couple of days but still no joy!
I would like to have a div scroll in a fixed position until it gets to the top of the footer.
Here is a fiddle of what i have so far: http://jsfiddle.net/danieljoseph/uk4mC/
I'm using this JQuery code but this uses pixels to determine when the div stops. I would like to use the top of the footer as the stop point:
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
$('#floating-container').css('top',scrollVal+'px');
if (scrollVal < 50) {
$('#floating-container').css('top','50px');
}
if (scrollVal > 2347) {
$('#floating-container').css('top','2347px');
}
});
The issue is that i am using a CMS and the client will be adding text to the page so the second value will change depending on what they add.
I hope i've been clear enough! please let me know if you require more details.
Thanks,

You have to check in the scroll event if the bottom edge of your div is lower than the footer. If it is, place the div at the position of the footer minus the height of the div.
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
container.css('top', scrollVal);
if (scrollVal < minTop) {
container.css('top', minTop);
}
if (container.offset().top > maxTop ) {
container.css('top', maxTop );
}
});
});
Fiddle
And, a much shorter variant of the script above:
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Short version fiddle.

Just read the position of the footers top when you load the page:
http://jsfiddle.net/uk4mC/1/
var footerTop = $('#text-block').position().top;
and then use that as a trigger:
if (scrollVal < footerTop) { }