I am using Chrome, and when i reload my page it brings me to the point of the page i was before reloading. So when i already scrolled half of the page and i reload it, chrome brings me back to where i scrolled to before.
I got a fixed nav-bar on my page:
$(document).ready(function() {
var mn = $(".top-menu");
mns = "main-nav-scrolled";
hdr = $('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
});
The navigation works, but when i reload the page it is dissapeared until i start scrolling again. Someone has any idea how to fix this?
Try something like that :
$(document).ready(function() {
$(window).scroll(sticky_nav());
sticky_nav(); // Force the first call on refresh
});
function sticky_nav() {
var mn = $(".top-menu");
mns = "main-nav-scrolled";
hdr = $('header').height();
if( $(this).scrollTop() > hdr) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
}
Related
I want to load ajax data when I reach the end of a particular div.
I use now :
$(window).scroll(function() {
if (! loadingAjax) {
if ($(window).scrollTop() > ($element.offset().top + $element.outerHeight() - 500)) {
from++;
loadingAjax = true;
loadMyData(from);
}
}
});
It seems a little random when I show console for example, or on smartphone.
What is the best way to detect user is reaching end of a div ($element here) ? With an offset of 50px for example before the end ?
Please have a look at the solution and you will be console logged in the last div.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top +
$('.posts').outerHeight() - window.innerHeight) {
console.log('End Div');
}
});
I'm working on a header banner that is hidden at the start but appears when the user scrolls down on the page. When the user scrolls back up to the top of the page it should disappear again and keep doing it until the user exits (there is an exit button on the banner which adds a cookie so if the user exits it won't show again).
The issue I'm having is that either the banner won't show up again when I scroll back up to the top of the page, or it will just keep showing up even after exiting. I've tried several options but nothing has worked so far.
function desktopHeader() {
$(window).on('scroll', function() {
console.log( $(this).scrollTop() );
});
var $headerBanner = $('.module-header-banner');
$('.close-btn').on("click", function () {
$.cookie("headerbanner", "exit", {expires: 2/24});
$('.module-header-banner').addClass("exit").fadeOut();
});
if($.cookie('headerbanner') == null) {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active').fadeIn();
}
$(window).scroll(function() {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active');
} else if($(window).scrollTop() < $('.site-header').height()) {
$headerBanner.removeClass('active');
}
});
}
}
At a loss -- if anyone has any advice would be best appreciated. Thanks!
Try to add your scroll event outside of the click function,
here is a updated code
function desktopHeader() {
$(window).on('scroll', function() {
console.log( $(this).scrollTop() );
});
var $headerBanner = $('.module-header-banner');
$('.close-btn').on("click", function () {
$.cookie("headerbanner", "exit", {expires: 2/24});
$('.module-header-banner').addClass("exit").fadeOut();
});
if($.cookie('headerbanner') == null) {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active').fadeIn();
}
}
$(window).scroll(function() {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active');
}
else if($(window).scrollTop() < $('.site-header').height()) {
$headerBanner.removeClass('active');
}
});
}
I have small angular SPA with couple routes. What I wanted is to have fadein effect only on #/welcome/ page. My jquery works ok but the problem is - its running on all pages and in another pages elements what should be animated just doesnt exist and thats the reason I have errors on my console when user scroll... I tried run script only when route changed and than check if location is /#/welcome but it always running even if not... I tried to put code only to controller which should scoped it to section with animating elements but it also run in another pages... Im confused please help
$scope.$on('$routeChangeSuccess', function() {
if (window.location.hash == '#/welcome') {
function check(element , fadeEffect ) {
$(window).on('scroll' , function(){
var position = $(document).scrollTop() + $(window).innerHeight() ;
var elem = $(element).offset().top + ($(element).innerHeight()) / 2;
if (elem <= position) {
$(element).addClass(fadeEffect);
}
else {
$(element).removeClass(fadeEffect);
}
});
}
check('.tablet' , 'fadeInRight');
check('.padding' , 'fadeInLeft');
}
else {
console.log('another page');
}
});
Your app is SPA, so once you add event to window it will keep until you close the browser tab.
You have to remove the event on destroying welcome page, so remove all those codes and add these to your welcome page controller:
//in welcome page controller
var onScroll = function(){
var queries = [
{elm: '.tablet', effect: 'fadeInRight'},
{elm: '.padding', effect: 'fadeInLeft'}
];
for (var i=0, j=queries.length; i<j; i++) {
var position = $(document).scrollTop() + $(window).innerHeight() ;
var elem = $(queries[i].elm).offset().top + ($(queries[i].elm).innerHeight()) / 2;
if (elem <= position) {
$(queries[i].elm).addClass(queries[i].effect);
}
else {
$(queries[i].elm).removeClass(queries[i].effect);
}
}
}
$(window).on('scroll' , onScroll);
$scope.$on('$destroy', function() {
$(window).off('scroll' , onScroll);
});
I'm trying to create an infinite scroll feature on my site but it isn't working.
My code:
var post = {}
post.load_moreBtn = $('#home_load_more');
if($(window).scrollTop() + $(window).height() == $(document).height()) {
post.load_moreBtn.trigger('click');
}
post.load_moreBtn.on('click', function () {
$(this).html('<img src="' + base_url + 'images/core/loader2.gif"/>');
post.load_more_messages($(this).attr('data-last_id'));
});
If I put an alert in place of the trigger it works,also if I remove the scroll detection bit, the load more works fine. Just can't get it to autoload, please help.
It's easy with jQuery:
$(function(){ //on document ready
$(document).scroll(function (e) { //bind scroll event
var intBottomMargin = 300; //Pixels from bottom when script should trigger
//if less than intBottomMargin px from bottom
if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin) {
$("#home_load_more").click(); //trigger click
}
});
});
I bind this in the
In Short:
I am working on a project and I want to run a function when a particular div is displayed on the screen.
Detail:
There is a scroll to top button fixed on the bottom right of the screen in my template. I want to hide that button when someone scroll down to the footer.
Means when someone scroll down to the footer and the top border of the footer is displayed on the screen, I want a function to run which would hide the go to top button.
Please help me out of this problem...
$(document).ready(function() {
var footer = $("footer");
var f_top = footer.position().top;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= f_top ) {
footer.hide();
}
else{
footer.show();
}
});
});
Initialize the window to monitoring its scrolling
$(document).ready(function () {
$(window).scroll(function () {
// get the element that you want check scrolling on it
var off = $("your-selector").offset().top;
var top = $(window).scrollTop() + $(window).height();
if (off <= top) {
// do your job
// for example you can call a function like:
my_method_to_invoke();
}
});
});
The function you want to invoke it:
function my_method_to_invoke() {
// TODO
}
I think you'll need to register a scroll listener on the body that checks to see if the footer is in view and perform the hide if so. Something like this...
$(body).scroll(function () {
scrollCheck();
});
var scrollCheck = function () {
var docTop, docBot, elemTop, elemBot;
docTop = $(window).scrollTop;
docBot = docTop + $(window).height();
elemTop = $(<footer element>).offset().top;
elemBot = elemTop + $(<footer element>).height();
if ((elemBottom >= docTop) && (elemTop <= docBot)) {
$(<button element).hide();
}
}