How do I prevent fadeIn/Out blinking with expanding/collapsing header?


Tags: javascript,jquery,html,css,fade

Problem :

I've been wrestling with a pesky logic issue all day.

I have a header that I want to collapse into a small square once the user scrolls past the 60px mark (Y coordinate). I want the header to re-expand when the user hovers over the square.

enter image description here

JSFiddle of what I have so far

HTML

<div class="header">Header
  <div class="nav">Nav items nav items nav items</div>
</div>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

CSS

.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background-color: red;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.header.collapsed {
  width: 60px;
}

.body {
  padding-top: 80px;
}

jQuery

function collapseHeader() {
  $(".header").addClass("collapsed");
  $(".nav").fadeOut(200);
}

function expandHeader() {
  $(".header").removeClass("collapsed");
  $(".nav").fadeIn(200);
}

$(document).ready(function(){
  $(".header").mouseover(function() {
    if ($(window).scrollTop() > 60) {
      expandHeader();
    }
  });
  $(".header").mouseout(function() {
    if ($(window).scrollTop() > 60) {
      collapseHeader();
    }
  });

  $(window).scroll(function(){

      if ( ($(window).scrollTop() > 60) && ($('.header:hover').length == 0) ) {
        collapseHeader();
      }
      else {
        expandHeader();
      }
  });

});

The problem: The header content that's supposed to fade in and out starts blinking like mad. How do I stop that blinking?



Solution :

Use mouseenter and mouseleave functions instead of mouseover and mouseout

http://jsfiddle.net/f90jLmoa/4/


    CSS Howto..

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How can I show an attribute as text with CSS?

    How to change css file for this aim?

    How do i make div go under another div making columns

    How to make a CSS table with use of DIV UL LI

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    Font is missing glyphs for specific language - how can I utilize css fallback in this case?

    How to get CSS table-cell to 100% for responsive design [closed]

    How to assign CSS background image properties mixing classes and ids

    How to display a div as overlay which is hovered by a div which is inside another div?

    How to fade a box shadow in CSS?

    How to center a relative div in my case?

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to insert database values into the template stylesheet?

    How to find out DOM and CSS address to an element for Selenium?

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How to keep animated gifs animated while scrolling on iOS devices?

    How would you replicate these boxes in CSS?

    How do I use jQuery to change the value of a css selector value?

    how to add a CSS class inside a JavaScript setup code?

    How to change css pseudo elements in javascript? [duplicate]

    How to change extjs grid single cell background color depending on value changes?

    How to resolve background-image url inside css file while using azure blob storage

    How to change pseudo class property?

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    How to fix image urls when processing css files with Gulp?

    How to auto position sidenav in twitter bootstrap while sliding

    How to style a selected radio button AND include space as clickable?

    How to make hero slider go always in the same direction