CODEWITHSUNDEEP
javascriptjqueryhtmlcssfade
AnnaBlabber
AnnaBlabber

Reputation: 442

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

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?

Upvotes: 0

Views: 93

Answers (2)

alessandrio
alessandrio

Reputation: 4370

simply use hover()

$(".header").hover(
     function() {
        if ($(window).scrollTop() > 60) {
          expandHeader();
        }
      }),
      function() {
        if ($(window).scrollTop() > 60) {
          collapseHeader();
        }
});

Upvotes: 0

Tengiz
Tengiz

Reputation: 1920

Use mouseenter and mouseleave functions instead of mouseover and mouseout

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

Upvotes: 5

Related Questions