Statisch zu festen Menüleiste

Question

Ich arbeite an einer Website für ein Schulprojekt. Ich habe eine Menüleiste, die oben auf meinem Bildschirm schwebt, aber ich möchte, dass die Dinge nett und schick aussehen.

habe ich einige der Forschung auf, wie eine Menüleiste zu schaffen, wie dies jemand

https://nl.malwarebytes.org/mwb-download/

aussieht, kann mir helfen?

Answer 1

Es ist wichtig zu beachten, dass der Header auf der Beispiel-Site nicht aus ‚statischem‘ nicht Übergang zu ‚fester‘ Position. Es ist immer "fixiert" positioniert.

Um die Effekte des bereitgestellten Links neu zu erstellen, müssen Sie in Ihren Entscheidungen etwas darüber wissen, was geändert wird, welche Arten von Transitionen und welche Eigenschaften sich ändern.

Eine Möglichkeit, dies zu erreichen, ist die Verwendung von jQuery, um eine Bedingung zu erstellen, wenn der Benutzer über den oberen Rand des Fensters hinaus geblättert hat.

Zum Beispiel:

HTML:

<div class="menu"> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    </ul> 
</div> 

<div class="content"> 
    <!--Site content--> 
</div> 

CSS:

.menu{ 
    position:fixed; 
    width:100%; 
    height:100px; 
    background-color:transparent; 
    -webkit-transition: all 200ms ease; 
    transition: all 200ms ease; 
} 

.content{ 
    padding:100px 60px 60px 60px; /*accomodates the fixed position header space*/ 

    -webkit-transition: all 200ms ease; 
    transition: all 200ms ease; 
} 

/* Styles for the menu after scrollTop >= 1 */ 
.menu.scrolled{ 
    height:60px; 
    background-color:black; 
    color:white; 
} 

.menu.scrolled + .content{ 
    padding-top:60px; 
} 

JS:

$(function() { 
    $(window).scroll(function() { 
    var scrolled = $(window).scrollTop(); 
    if (scrolled >= 1) { 
     $('.menu').addClass("scrolled"); 
    } else { 
     $('.menu').removeClass("scrolled"); 
    } 
    }); 
}); 

Eine Version mehr stilistische CSS und zusätzliche CSS-Übergänge containg kann sein sah er re: http://codepen.io/eoghanTadhg/pen/PNRNOv

Answer 2

$(window).on('scroll', function(event) { 
    if($(this).scrollTop()>50 && $(this).innerWidth()>480) { 
     $('header').addClass('sticky'); 
    } 
    else { 
     $('header').removeClass('sticky'); 
    } 
}); 

Verwendung dieses in Java-Skript dann stylen einfach Ihre nav für .sticky Klasse