javascript - Sticky Header Logo Hover -

-

i found website today http://www.mcdonalds.de/. know how make sticky header this? logo scroll down navigation hide , logo hover show navigation. if on can can me out coding or resource helps me create same. reply of great me.

this ridiculous implementation think might idea.

$(window).scroll(function() {      var $container = $(".container");    var container_offset = $container.offset().top - $(window).scrolltop();    console.log(container_offset);    if(container_offset){      $container.addclass('fixed');    }else{      $container.removeclass('fixed');    }    });
@import url(http://fonts.googleapis.com/css?family=open+sans);  body {    font-family: 'open sans', sans-serif;    font-size: 16px;    background-color: #bdc3c7;    padding:0;    margin:0;  }    .header {    background-color: #3498db;    float: left;    width: 100%;    height: 70px;    transition: width .3s;  }    .container.fixed .header {    width: 100px;    max-width: 900px;    position: fixed;    top: 20px;  }  .container.fixed .header ul {    display: none;  }  .container.fixed .main {    margin-top: 70px;  }    h1 {    float: left;  }    ul {    float: left;  }  ul li {    display: inline-block;  }    .container {    margin: 0 auto;    width: 100%;    padding: 20px;    background-color: #34495e;    float: left;  }    .main {    min-height: 1000px;    color: #fff;    float: left;    line-height: 1.4em;  }    p {    margin-bottom: 20px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">      <header class="header">    <h1>logo</h1>    <ul>      <li><a href="#">foo</a></li>      <li><a href="#">foo</a></li>      <li><a href="#">foo</a></li>      <li><a href="#">foo</a></li>      <li><a href="#">foo</a></li>   </ul>  </header>      <div class="main">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>  </div>      </div>


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more