Personal speech.
I have the following problem, I have a code that identifies when a page scroll occurred to be able to raise my side menu when a scroll is performed. It works in IE and FireFox but does not work in Chrome.
Follow the code example.
<script type="text/javascript">
$(document).ready(function () {
var $body = $('body');
var $pagiSidebar = $('.page-sidebar');
$body.scroll(function (event) {
console.log('scrolled $(body).scrollTop() = ' + $('body').scrollTop());
console.log('scrolled $(document).scrollTop() = ' + $(document).scrollTop());
console.log('scrolled $(window).scrollTop() = ' + $(window).scrollTop());
console.log('scrolled $(html).scrollTop() = ' + $('html').scrollTop());
console.log('scrolled $(html, body).scrollTop() = ' + $('html, body').scrollTop());
console.log('scrolled $(html, body, document).scrollTop() = ' + $('html, body, document').scrollTop());
if ($body.scrollTop() > 47) {
$pagiSidebar.addClass('top-zero');
}
else {
$pagiSidebar.removeClass('top-zero');
}
});
});
</script>
With this I got the following results.
Firefox e IE =
scrolled $(body).scrollTop() = 270
scrolled $(document).scrollTop() = 0
scrolled $(window).scrollTop() = 0
scrolled $('html').scrollTop() = 0
scrolled $('html, body').scrollTop() = 0
scrolled $('html, body', document).scrollTop() = 0
Chrome =
scrolled $(body).scrollTop() = 0
scrolled $(document).scrollTop() = 0
scrolled $(window).scrollTop() = 0
scrolled $('html').scrollTop() = 0
scrolled $('html, body').scrollTop() = 0
scrolled $('html, body', document).scrollTop() = 0
Does anyone know why or is there any other way to get this same result without using scrollTop?
Solution
Galera, after exploring a bit more and analyzing the suggestions I came up with the following solution.
<script type="text/javascript">
$(document).ready(function () {
var $body = $('body');
var $pageSidebar = $('.page-sidebar');
var $pageContainer = $('.page-container');
$body.scroll(function (event) {
if ($pageContainer.offset().top > 0) {
$pageSidebar.css("top", $pageContainer.offset().top + "px");
} else {
$pageSidebar.css("top", "0px");
}
});
});
</script>
I gave up using scrollTop () because it was showing very unstable behavior which is not good for application.
Thanks everyone!