Sometimes page loads with scroll element already in target position

[maziarom]

First of all thank you for a great script!

There's something very strange going on with the ScrollToFixed implementation on my site. Sometimes, in random fashion, the page loads up with the scroll element already in the target position before having scrolled down to reach there. It's pretty random, so it's seems freaky to me. Maybe you can figure out what is going on. You might have to reload the page several times until it happens.

The url is: http://josefsvienna.com/

This happens in all browsers as far as I can tell, I've tried the latest Chrome, Firefox, Safari & Opera on Mac.

Thank you very much, Maz

[bigspotteddog]

Nice website! Makes me want chocolate :)

Is it possible that .scrollToFixed is called more than once because of the checkWidth function? You can use the minWidth option instead of the window.resize listener. Just call scrollToFixed like this:

$('#navbar-main').scrollToFixed( { marginTop: 70, minWidth: 767 } );

The limit: 0 is the default, so you don't need that anymore since you are no longer using it.

I don't know if that is the cause, but it might be.

Also, it seems that there is dynamic content loading after .scrollToFixed is called. You'll want to call $(window).resize() to get the plugin to recalculate.

Again, nice work. The site looks fantastic!

[maziarom]

Thank you for the reply and for the compliments, I'm glad you like the site!

I tried out your suggestions, and the problem persists. I checked and I believe that I'm only calling .scrollToFixed once. Sorry, my javascript knowledge is very limited.

Here is my code in the site header, maybe you can find if there's anything wrong with it:

<!-- Load ScrollToFixed for Fixed Nav Menus -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/bower_components/ScrollToFixed/jquery-scrolltofixed-min.js"></script>

<script type="text/javascript">
// Load ScrollToFixed for Fixed Nav Menus
$(document).ready(function() {
// Optimalisation: Store the references outside the event handler:
var $window = $(window);
var $pane = $('#pane1');

function checkWidth() {
var windowsize = $window.width();
if (windowsize > 767) {
//if the window is greater than 767px wide then turn on Scroll To Fixed...
$(document).ready(function() {
$('#navbar-main').scrollToFixed( { marginTop: 70, limit: 0 } );
// $('#sidebar2').scrollToFixed( { marginTop: $('#header').outerHeight() + 5,limit: $('#sidebar2').offset().bottom } );
// $('#footer').scrollToFixed( { bottom:0,limit: $('#footer').offset().bottom } );
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});         
</script>

I tried out your suggestion this way, please let me know if I did something wrong:

<script type="text/javascript">
// Load ScrollToFixed for Fixed Nav Menus
$(document).ready(function() {
// Optimalisation: Store the references outside the event handler:
var $window = $(window);
var $pane = $('#pane1');

$('#navbar-main').scrollToFixed( { marginTop: 70, minWidth: 767 } );

});         
</script>

Also about the dynamic content loading after .scrollToFixed is called, how and where exactly should I call $(window).resize() to get the plugin to recalculate.

Thank you very much for your help.

[horusacosta]

hey, im not an expert but, i see your calling the script in the head section, try to load it in the footer instead.

[bigspotteddog]

It is staying stuck in the fixed state for some reason. The scroll code is firing as I can see most of the properties being set, with the exception of position. Chrome spikes up over 200% CPU when scrolling up and down and stays there for a while after as if there is a lot of computation going on that it cannot keep up with. Are there dynamic scripts running that are triggered by scrolling other than the scroll to fixed handlers?

[bigspotteddog]

It is the animated background causing the cpu to stay well above 100% the entire time the web page is loaded. I removed scroll to fixed from the target element and the cpu stayed very high. Next, I refreshed to get the plugin in use again then I removed the animated background. The plugin works as expected without the animated background. I think it is safe to say the plugin is not compatible with animated backgrounds.

This is the css rule that is not compatible:

-webkit-animation: animatedBackground 50s linear infinite;

[bigspotteddog]

That is most likely not the only issue, I think the animated background just makes it worse. There is something else causing it as I was able to get it stuck in the fixed state even with the animated background off. This requires further investigation.