CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ludwig
Ludwig

Reputation: 1791

Resizing screen causes issues

I have a page where I have two divs, one takes up the whole screen, and the scrolling is enabled only to the point where the div is still visible. That way the other div is not visible, it should become visible only on a click. The issue that I have is that if I resize the screen down, making it bigger, when doing that the other div becomes visible until the point when I start scrolling again, where it resets and the first div takes up the whole screen again. I can't do with a second div show hide functions because of the issues with the slider that I have there, it is not working properly if I first hide it and then show it, so I have disabled scrolling for that matter, to make other div not visible. How can I avoid having that div being visible when making screen bigger?

This is my script:

if (window.location.pathname == '/all') {
    $('body').css('overflow-y', 'auto');

    scrollPoint = $(".magazine-section").offset().top - $(window).height();

    $(window).scroll(function() {
        $(window).scrollTop() > scrollPoint ? $(window).scrollTop(scrollPoint) : '';
    }).scroll();

    $( window ).resize(function() {
      scrollPoint = $(".magazine-section").offset().top - $(window).height();
    });

  }
  else {
    $('body').css('overflow-y', 'hidden');
  }

Upvotes: 0

Views: 59

Answers (1)

O_Z
O_Z

Reputation: 1563

Instead of hiding the div with display:none try visibility:hidden If this does not work try using the opacity:0

This way your slider should work properly without issues. The problem is probably because of the display:none that has side affects (makes offsetHeight 0 for example)

Upvotes: 1

Related Questions