Problems implementing an animated sticky header

I have a rather height header. After a certain amount of px scrolling I would like to hide 2 items from the header (logo and branch logo) and replace it by a smaller logo. This is what I have sofar:

<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 20){  
        $('header').addClass("sticky");
	$('#logo').hide();
	$('#rdw').hide();
	$('#alt_logo').show();
    }
    else{
        $('header').removeClass("sticky");
	$('#logo').show();
	$('#rdw').show();
	$('#alt_logo').hide();
    }
});
</script>

The if part is working fine, but the else part isn’t. What is wrong with my approach?

Thank you in advance

The code seems to be working as it is assuming I’ve guessed the html correctly :smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
header {
	background:red;
	padding:50px 10px 10px;
	margin-top:-50px;
	transition:all 1s ease;
}
.sticky {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0;
	padding:10px;
	background:rgba(240,15,0,0.8);
}
#logo{height:100px}
#alt_logo {
	display:none
}
.sticky + .content {
	padding-top:50px
}
.content {
	height:2000px;/* for testing scroll */
}
</style>
</head>

<body>
<header>
		<div id="logo">logo</div>
		<div id="alt_logo">Alt Logo</div>
		<div id="rdw">RDW</div>
</header>
<div class="content">
		<p>scroll start</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(window).scroll(function() {
  if ($(this).scrollTop() > 20){  
  $('header').addClass("sticky");
	$('#logo').hide();
	$('#rdw').hide();
	$('#alt_logo').show();
    }
    else{
  $('header').removeClass("sticky");
	$('#logo').show();
	$('#rdw').show();
	$('#alt_logo').hide();
    }
});
</script>
</body>
</html>

Hi Paul thanks for the reply :smile:

The html is slidly different:


<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Tomossloop.nl | Officiele website</title>
  <meta name="description" content="Voor nieuwe en gebruikte Tomos onderdelen">
  <meta name="keywords" content="tomos,onderdelen,nieuw,gebruikt">
  <meta name="robots" content="index, follow">
  <meta name="revisit-after" content="7 days">
  <link rel="stylesheet" href="/css/website.css">
  <link rel="stylesheet" href="/css/responsiveslides.css">
  <link rel="stylesheet" href="/css/responsive.css">
</head>
<body id="home">
<div id="wrapper">    
    <header>
  <div class="inside">
    <section id="logo">
      <a href="/"><img src="/images/logo.png"></a>
    </section>
    <section id="rdw">
      <img src="/images/rdw.png">
    </section>
    <section id="alt_logo">
      Logo
    </section>
    <nav id="main-nav">
      <ul>
            <li><a href="/" class="/">Home</a></li>
            <li><a href="/faq" class="/faq">FAQ</a></li>
            <li><a href="/links" class="/links">Links</a></li>
            <li><a href="/gastenboek" class="/gastenboek">Gastenbook</a></li>
            <li><a href="/contact" class="/contact">Contact</a></li>
            </ul>      
    </nav>
  </div>      
</header>    <ul class="rslides" id="slider1">
  <li><img src="/images/slides/t01.jpg"></li>
  <li><img src="/images/slides/t02.jpg"></li>
  <li><img src="/images/slides/t03.jpg"></li>
  <li><img src="/images/slides/t04.jpg"></li>
  <li><img src="/images/slides/t05.jpg"></li>
</ul>

    <main id="main">
      Hallo
    </main>
</div>
  
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script>
$(window).scroll(function() {
  if ($(this).scrollTop() > 20){  
  $('header').addClass("sticky");
	$('#logo').hide();
	$('#rdw').hide();
	$('#alt_logo').show();
    }
    else{
  $('header').removeClass("sticky");
	$('#logo').show();
	$('#rdw').show();
	$('#alt_logo').hide();
    }
});
</script>
</body>
</html>

and the css

#logo,
#alt_logo {
  width: 18%;
  float: left;	
}

#alt_logo {
  display: none;	
}

#logo a {
  width: 100%;
  display: block;
  overflow: hidden;	
}

#rdw {
  width: 11.68224299065421%;
  float: right;
  margin: 1em 0;	
}

#main-nav{
  float: right;
  clear: right;
  position: relative;
  z-index: 100;
}

#main-nav ul,
#main-nav li {
  list-style: none;	
}

#main-nav li{display:inline-block;margin-left:2em}

#main-nav li a{
  display: block;
  padding: .5em;
  background: none;
  font-family:ff-tisa-web-pro,Georgia,Times,"Times New Roman",serif;
  font-size: 1.2em;
  text-transform:lowercase;
  color: #712918;
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out
}

The sticky header is indeed working but div main-nav dissapears What am I doing wrong?

Thank you in advance!

It doesn’t disappear in the code above. It still seems to be working ok.

Have you got a link to the site as you must be missing something? I didn’t see any of the sticky css either.

Hi Paul thanks again for the reply. No I don’t have a live link as yet. Here is the complete html and css

HTML

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tomossloop.nl | Officiele website</title>
<meta name="description" content="Voor nieuwe en gebruikte Tomos onderdelen">
<meta name="keywords" content="tomos,onderdelen,nieuw,gebruikt">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days">
<link rel="stylesheet" href="/css/website.css">
<link rel="stylesheet" href="/css/responsiveslides.css">
<link rel="stylesheet" href="/css/responsive.css">
</head>
<body id="home">
<div id="wrapper">

<header>

  <div class="inside">
  
    <section id="logo">
      <a href="/"><img src="/images/logo.png"></a>
    </section>
    
    <section id="rdw">
      <img src="/images/rdw.png">
    </section>
    
    <section id="alt_logo">
      Logo
    </section>
    
    <nav id="main-nav">
      <ul>
            <li><a href="/" class="/">Home</a></li>
            <li><a href="/faq" class="/faq">FAQ</a></li>
            <li><a href="/links" class="/links">Links</a></li>
            <li><a href="/gastenboek" class="/gastenboek">Gastenbook</a></li>
            <li><a href="/contact" class="/contact">Contact</a></li>
            </ul>      
    </nav>
    
  </div>
        
</header>
<ul class="rslides" id="slider1">
  <li><img src="/images/slides/t01.jpg"></li>
  <li><img src="/images/slides/t02.jpg"></li>
  <li><img src="/images/slides/t03.jpg"></li>
  <li><img src="/images/slides/t04.jpg"></li>
  <li><img src="/images/slides/t05.jpg"></li>
</ul>


<main id="main">
  <aside id="sidebar">

  <section class="sidebox">
    <h2>Nieuwe Onderdelen</h2>
  </section>

</aside></main>

</div>
  
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script>
$(window).scroll(function() {
  if ($(this).scrollTop() > 50){  
  $('header').addClass("sticky");
	$('#logo').hide();
	$('#rdw').hide();
	$('#alt_logo').show();
    }
    else{
  $('header').removeClass("sticky");
	$('#logo').show();
	$('#rdw').show();
	$('#alt_logo').hide();
    }
});
</script>
</body>
</html>

CSS

@import url("normalize.css");

/*----------------------------------------------------*/
/*  HTML & BODY
/*----------------------------------------------------*/

html, body {
  height: 100%;	
}

body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;
}

body {
  overflow-y: scroll;
  line-height: 1.3;
  background:#eeeddf url(../images/body.jpg) repeat;
  font-family: Helvetica,Arial,sans-serif;	
  color:#433a3b;
}

/*----------------------------------------------------*/
/*  WRAPPER & FOOTER
/*----------------------------------------------------*/

#wrapper {
  width: 100%;
  min-height: 100%;
  margin: -10em auto 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-top: 10em solid #eeeddf	
}

* html #wrapper { 
  height:100% 
}

#wrapper:after{
  content: "";
  height:1%;
  display:block;
  clear:both;
  overflow:hidden;	
}

#footer {
  width: 100%;
  height: 10em;	
}

header{
  width: 100%;
  overflow: hidden;
  position: relative;
  background:#FFF;
  border-top: 6px solid #712918;
  border-bottom: #DDD solid 1px;
  z-index: 10;
}

header.sticky {
  position: fixed;
  font-size: 24px;
  line-height: 48px;
  height: 48px; 
  width: 100%;
  background: #FFF;
  text-align: left;
}

.inside, #main{
  width: 80%; 
  margin:0 auto; 
  padding:0 4em; 
  position:relative
}

#main {
  height: 2222px;
  margin-top: -3em;
  padding: 5em 4em;	
  background: #FFF;
  z-index: 2;
}

/*----------------------------------------------------*/
/*  GENERAL PROPERTIES
/*----------------------------------------------------*/

.flt-r {
  float: right;	
}

.flt-l {
  float: left;	
}


/*----------------------------------------------------*/
/*  HEADER
/*----------------------------------------------------*/

#logo,
#alt_logo {
  width: 18%;
  float: left;	
}

#alt_logo {
  display: none;	
}

#logo a {
  width: 100%;
  display: block;
  overflow: hidden;	
}

#rdw {
  width: 11.68224299065421%;
  float: right;
  margin: 1em 0;	
}

#main-nav{
  float: right;
  clear: right;
  position: relative;
  z-index: 1000;
}

#main-nav ul,
#main-nav li {
  list-style: none;	
}

#main-nav li{display:inline-block;margin-left:2em}

#main-nav li a{
  display: block;
  padding: .5em;
  background: none;
  font-family:ff-tisa-web-pro,Georgia,Times,"Times New Roman",serif;
  font-size: 1.2em;
  text-transform:lowercase;
  color: #712918;
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out
}

#main-nav li a:hover{
  background: #712918;
  color:#fff
}

/*----------------------------------------------------*/
/*  SIDEBAR & CONTENT
/*----------------------------------------------------*/

#sidebar,
#content {
  width: 30%;
  margin: 0;
  padding: 0;
  float: left;
  position: relative;
  z-index: 2;	
}

#content {
  float: right;	
}

/*----------------------------------------------------*/
/*  SIDEBAR
/*----------------------------------------------------*/

.sidebox  {
  width: 100%;
  overflow: hidden;
  padding: 1rem;
  background-color:transparent;
  background-color:rgba(113,41,24,0.7);	
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.sidebox + .sidebox {
  margin-top: 2em;	
}

.sidebox h2 {
  font-size: 1.2em;
  padding-bottm: 1.5em;
  color: #FFF;	
}

.sidebox ul {
  width: 100%;	
}

I hope this will do? Thank you in advance

Hi,

Yes its all working ok. The problem is that your header goes to 48px tall which is too short to show the nav. You need to reduce the margins,paddings and font-size of the nav.,

e.g.

.sticky #main-nav ul{margin:0}
.sticky #main-nav li a {padding:0 .5em;font-size:1.2rem}

Hi Paul. Sorry I’m coming back to you about it this late!! This works indeed great. The only thing I don’t understand is the font size! You change it from em to rem. Why is it working wit rem but not with em?

Hi,
I’m on holiday in Spain at the moment and only have my phone at hand so can’t debug anything unfortunately

Maybe one of the other members can jump in.

Ems should work unless the parent has zero fontsize of course as ems are based on the parent and not the root like rem units.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.