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 make arc shapes with CSS3?

    Transition on div height change caused by its inner element showing or hiding

    css: how to access a value that is not used by an element?

    how can i change the style of scroll bar

    How can I apply CSS selector to attribute values being case sensitive?

    How can I register a css page from an ascx control?

    How do I set a CSS width from a javascript function result?

    How to Intercept a css get request [closed]

    Nine divs in columns. How to design this?

    How to draw lines in ionic

    How do I align the list items in an
      with my

      ?

    Jquery: How to find if element has inline property (not in CSS)

    How can I make a 2-level navigation bar? [closed]

    How to adjust items in an ordered list without affecting sub-lists?

    How do I make a element a regular tab stop within a form?

    How to make a CSS animation/transition play at a fixed speed, not a fixed duration? [duplicate]

    How to add comments to inline CSS? [closed]

    Homepage build - How to use CSS more efficiency?

    How to make the long text to fit inside a small div?

    How do you associate a css/sass stylesheet to a view in rails?

    How to vertically align the text into a coloured div using CSS?

    How to set background texture to 50% of the page in css

    CSS: How to select first element in each row?

    How well does iOS / mobile safari comply with modern browser standards?

    How to add Background Image in css using master page

    How to recalculate the css url paths when moving it to a different folder

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How to make a full width image with fixed height in bootstrap?

    How to reset CSS3 *-transform: translate(…)?

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