Slide down menu on scroll issue

Question

I have a menu that appears when you scroll past a certain point it looks fine but sometimes when scrolling back up or down it leaves white marks on the page and the text sometimes moves, usually when it hits certain objects (for example it shakes 1pixel and then back when it hits the bottom of the slideshow). Obviously this won't be on every pc but it is a problem I'd like to fix and jQuery isn't my strongest point. Another thing is if you resize the window to be mobile sized I have a small menu (again when you scroll down the page as I haven't styled the proper positioning yet) and when clicking the menu (especially on a mobile device) it is very laggy, i would like this to be smoother. can you help improve my code? Here's is the site http://alexn.co.uk/Mono2013/Monolith/index.html and here is the code:

    $(window).scroll(function () {
    var $fadeHeader = $("#cartBanner"),
        top = $(this).scrollTop();
    
    if (top > 184) {
        $fadeHeader.css('height', '35px');
    } else {
        $fadeHeader.css('height', '0');
    }
});

$(document).ready(function(){
  $('#menuToggle').click(function(){
    $('#cartBanner').toggleClass('expanded');

  });
});

Another thing, when i scroll up and down over the bottom of the slideshow the fonts change/blur, its noticeable on the M, the flick on the M dissapears and the nav text changes appearance

EDIT: Seems to be an issue with flexslider, changing the slideshow to bootstrap's has eradicated the issue.

@f00bar that hasn't made a difference as far as I can tell but i have changed it to document, not sure why I had placed window on it, thanks — , Oct 19 '13 at 17:21
Could you set a jsfiddle including html and javascript ? @alexnewman — Stphane, Oct 19 '13 at 17:33
@f00bar I don't think there's any need now, I've changed my slider from flexslider to carousel and that seems to be what was causing the problem. something with flexslider makes white pixels appear when scrolling fast and makes the text move/blur when you hover over the bottom, no issues with the bootstrap slider. Thanks anyway — , Oct 20 '13 at 09:05
You're welcome, conflict or collision between animations ... great then ! — Stphane, Oct 20 '13 at 09:55

score 0 · Answer 1 · edited May 23 '17 at 12:21

You can debug on jquery How to debug Javascript/jQuery event bindings with FireBug (or similar tool)

Also, it is usefull to Download the uncompressed, development jQuery and replace your jquery.min.js on the development environment

Many animation effects created "in house" are subject to expose visual bugs depending on the platform. It is a good aproach to use proven solutions and keep the animation at a low level.

Take a look at: 10-super-javascript-animation-frameworks

Slide down menu on scroll issue

1 Answers1