CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leff
Leff

Reputation: 1330

Javascript - detecting scroll attempt when window.pageYOffset is already 0

I have a div that is on the page load pushed down out of the view and then exposed later and pushed up to the top-bar and takes over the rest of the screen on click function by changing the top style in my function like this:

$('#drawer').animate({
      top: 92
    }, 500);

I would like to when that div is visible, to detect if the user is scrolling up and when it attempts to scroll up that the div slides down by the amount of pixels the user is scrolling up. I am not sure how to exactly do that.

In my script scroll-event.js I have tried to setup a function where I would on document ready first declare global variable drawerIsUp = false;, check if it is false or true and then execute the scrolling part. But, since when the drawer is up the window.pageYOffset is 0, how can I keep adding pixels to the div top style if the user tries to scroll but the window.pageYOffset is 0 already?

    $(document).ready(function (){
    drawerDiv = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;


    scrollDrawer = function () {
      if (drawerIsUp) {
  console.log('entered');
        function winScroll() {
           drawerDiv.style.top = window.pageYOffset + "px";
        }
          winScroll();
          $(window).bind({scroll: winScroll});
      }
    }

});

And this is the html:

         <div id="app">
            <div id="bg">
            </div>

              @section('topBar')
                @include('customer.layouts.partials.top-bar')
              @show
            <div id="main-section">
              @section('header')
                @include('customer.layouts.partials.header')
              @show

              @section('carousel')
                @include('customer.layouts.partials.carousel', ['function' => 'drawer', 'carouselPadding' => ''])
              @show
            </div>

            <div id="drawer">
              <div id="magazine-detail">
              </div>
              <div id="magazine-detail-carousel">
                @section('magazine-detail-carousel')
                  @include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => 'carouselPadding'])
                @show
              </div>
            </div>

          </div>

So, the drawer gets over the main-section on click, and then when it is over I should move it down if the user scrolls up from it.

The css for the drawer and top bar:

#main-section {
  height: calc(100vh - 92px);
  overflow-y: scroll;
  width: 100%;
  position: fixed;
  overflow-y: scroll;
  top:77px;
}

#drawer {
  z-index: 5;
  position: fixed;
  top: 100vh;
  height: calc(100vh - 92px);
  max-height: 100%;
  overflow-y: scroll;
  width: 100%;
  background-color: $white;
  padding-left: 15px;
  padding-right: 15px;
}

.top-bar {
  position: fixed;
  top: 0;
}

Upvotes: 1

Views: 350

Answers (1)

FlatLander
FlatLander

Reputation: 1757

You used drawer inside winResize function. But drawer was declared inside $(document).ready so winResize could not recognize what you meant by drawer. 

$(document).ready(function (){
    drawer = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;

    function winResize() {
       drawer.style.top = topBar.offsetHeight + "px";
    }

    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});
});

Learn more about variable scopes

https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Upvotes: 0

Related Questions