CODEWITHSUNDEEP
jqueryscroll
lopezi
lopezi

Reputation: 547

Scroll position jQuery

I have this page with a full-width video header. After the user scrolls the header size I remove the header like this:

var startScroll = $('.header').outerHeight();
$(window).scroll(function() {
  var scrollTop = $window.scrollTop();

  /*if (scrollTop > startScroll) {
    $('.inline-menu').addClass('menu-fixed').css('top', adminBar);
  } else {
    $('.inline-menu').removeClass('menu-fixed').removeAttr('style');
  }*/

  if(scrollTop > startScroll) {
    // do something
    $('.header').addClass('header-remove');
    $('.wrap').addClass('wrap-remove');
    $('.inline-menu').addClass('menu-fixed').css('top', adminBar);

    /*$(".inline-menu").css({top, startScroll;
    startScroll = 0;

    window.scrollTo(0,0);
    $('.main').scrollTo(0,0);*/
  }
});

The issue is that the page jumps the first content "news" once you are scrolling pulling the page directly to "Management Positionierung". Can't figure it out why.

The site is: http://kk.lopezi.com/

Upvotes: 3

Views: 157

Answers (2)

lopezi
lopezi

Reputation: 547

So this is the piece of added/edit code that solved the issue

if(scrollTop > startScroll) {
// do something
$('.header').addClass('header-remove');
$('.wrap').addClass('wrap-remove');
$('.inline-menu').addClass('menu-fixed').css('top', adminBar);


window.scrollTo(0,0);
startScroll = 22222; //make the condition always true so it executes only once

}

Upvotes: 0

milez770
milez770

Reputation: 112

This is because you scroll down actual scroll bar down and remove the title page which makes you end up at Management Positionierung not news since your scroll bar is pulled down already and new is at the very top. It will be solved either you do not scroll down but just pull up(using transition or animframe) and then remove or do not remove title page at all.

123

this is your first page where scroll bar is at very top and when you click arrow,

enter image description here

it scrolls down and does transition at the same time . so you end up at the middle of docment, not the top.

enter image description here

and because header is removed news section is not at the middle anymore, it's at the very top where header was. since you scrolled down already, your scroll stays at the middle while news is now at the very top. this is why I suggest you either only do transition or do not remove header.

enter image description here

so this is how it would work if you choose to not remove header, so that news stays middle not top.

if you want to remove header, you could use this code after removing header.

window.scrollTo(0,0);

which will scroll to x:0, y:0.

Upvotes: 1

Related Questions