0

I'm trying to toggle the width of my pagination on scroll but the toggle seams to be looping and it grows and shrinks over and over once the scroll trigger is hit.

I'm looking for the pagination menu to grow out like a shelf at my scroll point. and hide when you reach back to the top section of the site. – alcoven 16 secs ago edit

My JS

 $(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;

    var element_in_view = y_scroll_pos > activation_point;
    var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

    if(element_in_view || has_reached_bottom_of_page) {
        $('ul.pagination').animate({
      width: 'toggle'
    }, 350);
    }
    else {
        $('ul.pagination').animate({
      width: 'toggle'
    }, 350);
   }
});

http://codepen.io/alcoven/pen/XjLjVz

alcoven
  • 321
  • 2
  • 14
  • Can you provide an executable code snippet or a jsfiddle showing the problem? – ConnorsFan Oct 29 '16 at 19:53
  • http://codepen.io/alcoven/pen/XjLjVz – alcoven Oct 29 '16 at 20:21
  • If the problem is with the mouse wheel scrolling, you could use debouncing, as shown here: http://stackoverflow.com/a/20142252/1009922. – ConnorsFan Oct 29 '16 at 22:25
  • Right now what you have in the `if` and in the `else` are the same. also your question is not clear what you really want to do! please elaborate on what exactly you want to do in what condition – EhsanT Oct 29 '16 at 23:37
  • I'm looking for the pagination menu to grow out like a shelf at my scroll point. and hide when you reach back to the top section of the site. – alcoven Oct 29 '16 at 23:55
  • So you want the menu to grow wider as you scroll or just grow out one time after the scroll and then when the user reaches top of the page, the menu should disappear? – EhsanT Oct 30 '16 at 00:59
  • @EhsanT I want it to appear on scroll pos and disappear when the scroll pos is < than the trigger. – alcoven Oct 30 '16 at 21:44
  • OK, if you think your logic is correct and your problem is with the multiple calls of the scroll event(looping) then I think [this](http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling) may help you to fix the problem... – EhsanT Oct 30 '16 at 21:52
  • I don't see how to use this in my issue can you help with a codepen? – alcoven Oct 31 '16 at 01:17
  • I just added the _extension_ to the _js_ and changed your code accordingly in [this](http://codepen.io/anon/pen/zKVLPv) codepen. but I see there is a flaw in the logic. so please change the logic of show/hide the menu. – EhsanT Oct 31 '16 at 03:09
  • I don't understand? I'm sure my logic is flawed as I don't know how to achieve the desired effect. Your pen seems to be showing and hiding after everyscroll. I want the menu to appear on scroll from the top section and disappear when you're back at the top of the page. – alcoven Oct 31 '16 at 18:27
  • So please recheck your logic, right now for every scroll you are checking these two variables `element_in_view, has_reached_bottom_of_page` and regardless of what they are, you are entering in the `if` or `else` clause which in both of them you are toggling the menu. so it is obvious that for each scroll the menu would be toggled. that was the reason I was asking you to recheck your logic in the first place... – EhsanT Nov 01 '16 at 05:26
  • @EhsanT Yeah I see what you mean, but I don't understand how to fix the logic here. I want it to toggle on and off so that if else makes sense to me, not sure how to change correctly. – alcoven Nov 01 '16 at 15:25
  • @alcoven OK then, I have changed the [pen](http://codepen.io/anon/pen/zKVLPv) and the changes are only in your function `$(window).on('scroll', function(){` and also added a variable `var blnMenuVis = false;` at the line before the `function`. please give it a try and see if it's close to what you want to do. then you can change the settings to what suits you... – EhsanT Nov 01 '16 at 21:43
  • You are welcome. and please note that in this line `if(y_scroll_pos > 5) {`, number 5 is only a number I choose and you can change it to a variable or any other number you may need... – EhsanT Nov 03 '16 at 23:08

0 Answers0