Il menu fisso non funziona

Desidero che il mio menu rimanga al suo posto mentre lo scorrimento, ma quando aggiungo quanto segue nel mio CSS position:fixed;, il tutto va fuori posto da dove voglio che sia.Il menu fisso non funziona

In questo jsfiddle è possibile vedere come è ora e come voglio che sia. L'unica cosa sbagliata è che se cambio la posizione in modo fisso non rimane più dove voglio che sia.

<!DOCTYPE html> 
<html> 

<head> 
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> 
    <title>random</title> 
    <!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> --> 

</head> 

<body> 
    <div id="container"> 
     <div id="headcontainer"> 
     </div> 
       <div id="menu"> 
       <div id="logo"> 
        <p> 
         Hier komt een logo 
        </p> 
       </div> 
       <ul> 
        <li> 
         Home 
        </li> 
        <li> 
         Over 
        </li> 
        <li> 
         Contact 
        </li> 
        <li> 
         Producte 
        </li> 
       </ul> 
      </div> 

<div id="content"> 
<div class="text-box"> 


    </div> 
    <div class="text-box"> 


    </div> 
</div> 

    </div> 
</body> 

</html> 

<style> 
    /*Global*/ 

    * { 
     margin: 0px; 
    } 

    body {} 

    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6 {} 

    h1 {} 

    h2 {} 

    h3 {} 

    h4 {} 

    a {} 

    img {} 

    #container { 
     margin-left: auto; 
     margin-right: auto; 
     width: 100%; 

    } 

    #headcontainer { 
     width: 100%; 
     height: 100vh; 
     background-color: pink; 

    } 
    /* navigation */ 

    #menu { 
     height: 100px; 
     width: 100%; 
     background-color: rgba(0, 0, 255, 0.1); 
     max-height: 100px; 
     border: 1px solid black; 
     border-top: none; 


    } 

    #menu li { 
     display: inline-block; 
     text-decoration: none; 
     padding-left: 20px; 
     position: relative; 
     padding-right: 20px; 
    } 

    #menu ul { 
     float:right; 
     height:100%; 
     width: auto; 
     line-height: 100px; 
     margin-right:25px; 
    } 

    #menu ul li { 

    } 

    #menu ul li:hover { 
     cursor:pointer; 
     color: white; 
    } 

    #logo { 
     height: 50px; 
     width: auto; 
     background-color: red; 
     float: left; 
     margin-top: 0px; 
     margin-top: 30px; 
     margin-left: 60px; 


    } 

    /*content*/ 
    #content { 
    width:100%; 
    height:1000px; 
    min-height:500px; 
    margin-left: auto; 
    margin-right: auto; 


    } 

    .text-box { 
    width:40%; 
    height:auto; 
    background-color:blue; 
    min-height:100px; 
    float:left; 
margin-left:5%; 
margin-right:5%; 
margin-top:50px; 
    } 

    </style>

EDIT: Sto cercando di realizzare qualcosa di simile:

http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html

fonte

2016-06-03 Kevin

Ok, vedo quello che vuoi e io pensano che codificare questo comportamento in Javascript.

Questo tipo di soluzione andrà bene per te ??

Demo: http://jsfiddle.net/cc48t

$(window).scroll(function() { 
    if ($(window).scrollTop() > 100) { 
     $('#scroller').css('top', $(window).scrollTop()); 
    } 
} 
);

fonte

2016-06-03 09:48:44

Aggiungere il seguente script che funzionerà bene

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script> 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 650) { 
      $('#menu').css('position', 'fixed').css('top', '0'); 
     } else { 
      $('#menu').css('position', 'static'); 
     } 
    }); 
</script>

fonte

2016-06-03 09:20:38 Navy

Grazie per il tuo commento, ma se aggiungo top: 0 ; il menu va in alto e lo voglio dopo la rosa bg. - – Kevin

creo un jsfiddle.

Ho solo aggiungere quelle linee in #menu e funziona per me:

position : fixed; 
    top: 0;

Il menu non si muove.

fonte

2016-06-03 09:21:06

Grazie per il tuo commento, ma se aggiungo top: 0; il menu va in alto e lo voglio dopo la rosa bg. – Kevin

Ok, vedo quello che vuoi e penso che codificheresti questo comportamento in Javascript. –

Questo tipo di soluzione andrà bene per te ?? http://jsfiddle.net/cc48t/ –

Aggiungi questi stili al tuo menu in css .

position: fixed 
top:0

La combinazione di questi 2 farà sì che il menu rimanga dove deve rimanere: sempre in alto.

Come @ error404 ha detto:

gli elementi fissi va fuori dal normale flusso del documento e questo è il motivo per è possibile posizionare sulla parte superiore dello schermo.

fonte

2016-06-03 09:22:13 jelleB

Una risposta senza una spiegazione non dovrebbe essere una risposta. –

@ Error404 Meglio? – jelleB

Vorrei aggiungere che gli elementi fissi escono dal normale flusso del documento ed è per questo che è possibile posizionarlo nella parte superiore dello schermo. –

Utilizzare il menu all'interno dell'headecontainor e indicare la posizione: fissa; FOM #menu

<!DOCTYPE html> 
 
    <html> 
 
    
 
    <head> 
 
     <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> 
 
     <title>random</title> 
 
     <!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> --> 
 
    
 
    </head> 
 
    
 
    <body> 
 
     <div id="container"> 
 
      <div id="headcontainer"> 
 
    \t \t 
 
    \t \t <div id="menu"> 
 
        <div id="logo"> 
 
         <p> 
 
          Hier komt een logo 
 
         </p> 
 
        </div> 
 
        <ul> 
 
         <li> 
 
          Home 
 
         </li> 
 
         <li> 
 
          Over 
 
         </li> 
 
         <li> 
 
          Contact 
 
         </li> 
 
         <li> 
 
          Producte 
 
         </li> 
 
        </ul> 
 
       </div> 
 
    \t \t \t 
 
      </div> 
 
        
 
    
 
    <div id="content"> 
 
    <div class="text-box"> 
 
    
 
    
 
     </div> 
 
     <div class="text-box"> 
 
    
 
    
 
     </div> 
 
    </div> 
 
    
 
     </div> 
 
    </body> 
 
    
 
    </html> 
 
    
 
    <style> 
 
     /*Global*/ 
 
    
 
     * { 
 
      margin: 0px; 
 
     } 
 
    
 
     body {} 
 
    
 
     h1, 
 
     h2, 
 
     h3, 
 
     h4, 
 
     h5, 
 
     h6 {} 
 
    
 
     h1 {} 
 
    
 
     h2 {} 
 
    
 
     h3 {} 
 
    
 
     h4 {} 
 
    
 
     a {} 
 
    
 
     img {} 
 
    
 
     #container { 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      width: 100%; 
 
    
 
     } 
 
    
 
     #headcontainer { 
 
      width: 100%; 
 
      height: 100vh; 
 
      background-color: pink; 
 
    
 
     } 
 
     /* navigation */ 
 
    
 
     #menu { 
 
       position: fixed; 
 
      height: 100px; 
 
      width: 100%; 
 
      background-color: rgba(0, 0, 255, 0.1); 
 
      max-height: 100px; 
 
      border: 1px solid black; 
 
      border-top: none; 
 
    
 
    
 
     } 
 
    
 
     #menu li { 
 
      display: inline-block; 
 
      text-decoration: none; 
 
      padding-left: 20px; 
 
      position: relative; 
 
      padding-right: 20px; 
 
     } 
 
    
 
     #menu ul { 
 
      float:right; 
 
      height:100%; 
 
      width: auto; 
 
      line-height: 100px; 
 
      margin-right:25px; 
 
     } 
 
    
 
     #menu ul li { 
 
    
 
     } 
 
    
 
     #menu ul li:hover { 
 
      cursor:pointer; 
 
      color: white; 
 
     } 
 
    
 
     #logo { 
 
      height: 50px; 
 
      width: auto; 
 
      background-color: red; 
 
      float: left; 
 
      margin-top: 0px; 
 
      margin-top: 30px; 
 
      margin-left: 60px; 
 
    
 
    
 
     } 
 
    
 
     /*content*/ 
 
     #content { 
 
     width:100%; 
 
     height:1000px; 
 
     min-height:500px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    
 
    
 
     } 
 
    
 
     .text-box { 
 
     width:40%; 
 
     height:auto; 
 
     background-color:blue; 
 
     min-height:100px; 
 
     float:left; 
 
    margin-left:5%; 
 
    margin-right:5%; 
 
    margin-top:50px; 
 
     } 
 
    
 
     </style>

fonte

2016-06-03 09:26:17 Mani

JS:

$(document).ready(function() { 

$(window).scroll(function() { 
    //if you hard code, then use console 
    //.log to determine when you want the 
    //nav bar to stick. 
    console.log($(window).scrollTop()) 
if ($(window).scrollTop() > 100) { 
    $('#nav_bar').addClass('navbar-fixed'); 
} 
if ($(window).scrollTop() < 100) { 
    $('#nav_bar').removeClass('navbar-fixed'); 
} 
}); 
});

Css:

.navbar-fixed{ 
    position:fixed; 
    z-index:auto; 
    Top:0px; 
}

Dal momento che avete bisogno di questo css che viene acclusa solo quando sia stato selezionato una certa altezza nella vostra pagina web, Usando questo codice js puoi aggiungere una classe fissata a navbar al menu div dopo averne fatto scorrere uno quantità di altezza

fonte

2016-06-03 09:55:05 Pushpendra

Dal momento che non si utilizza JQuery, si può realizzare attraverso la semplice javascript

var header    = document.querySelector('div'), 
 
    title    = header.querySelector('ul'), 
 
    fix_class   = 'fixnav'; 
 

 
function stickyScroll(e) { 
 

 
    if(window.pageYOffset > 310) { 
 
    title.classList.add(fix_class); 
 
    } 
 

 
    if(window.pageYOffset < 310) { 
 
    title.classList.remove(fix_class); 
 
    } 
 
} 
 

 
// Scroll handler to toggle classes. 
 
window.addEventListener('scroll', stickyScroll, false);

<style> 
 
    /*Global*/ 
 
    
 
    * { 
 
     margin: 0px; 
 
    } 
 
    
 
    body {} 
 
    
 
    h1, 
 
    h2, 
 
    h3, 
 
    h4, 
 
    h5, 
 
    h6 {} 
 
    
 
    h1 {} 
 

 
    h2 {} 
 
    
 
    h3 {} 
 
    
 
    h4 {} 
 
    
 
    a {} 
 
    
 
    img {} 
 
    
 
    #container { 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     width: 100%; 
 
     
 
    } 
 
    
 
    #headcontainer { 
 
     width: 100%; 
 
     height: 100vh; 
 
     background-color: pink; 
 

 
    } 
 
    /* navigation */ 
 
    .fixnav{ 
 
     position:fixed; 
 
     z-index:9999; 
 
     top:0; 
 
    } 
 
    #menu { 
 
     height: 100px; 
 
     width: 100%; 
 
     background-color: rgba(0, 0, 255, 0.1); 
 
     max-height: 100px; 
 
     border: 1px solid black; 
 
     border-top: none; 
 
     transition: 1s all; 
 
    } 
 
    
 
    #menu li { 
 
     display: inline-block; 
 
     text-decoration: none; 
 
     padding-left: 20px; 
 
     position: relative; 
 
     padding-right: 20px; 
 
    } 
 
    
 
    #menu ul { 
 
     float:right; 
 
     height:100%; 
 
     width: auto; 
 
     line-height: 100px; 
 
     margin-right:25px; 
 
    } 
 
    
 
    #menu ul li { 
 

 
    } 
 
    
 
    #menu ul li:hover { 
 
     cursor:pointer; 
 
     color: white; 
 
    } 
 
    
 
    #logo { 
 
     height: 50px; 
 
     width: auto; 
 
     background-color: red; 
 
     float: left; 
 
     margin-top: 0px; 
 
     margin-top: 30px; 
 
     margin-left: 60px; 
 
     
 

 
    } 
 

 
    /*content*/ 
 
    #content { 
 
\t width:100%; 
 
\t height:1000px; 
 
\t min-height:500px; 
 
\t margin-left: auto; 
 
    margin-right: auto; 
 
    
 

 
    } 
 

 
    .text-box { 
 
\t width:40%; 
 
\t height:auto; 
 
\t background-color:blue; 
 
\t min-height:100px; 
 
\t float:left; 
 
margin-left:5%; 
 
margin-right:5%; 
 
margin-top:50px; 
 
    } 
 

 
    </style>

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> 
 
    <title>random</title> 
 
    <!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> --> 
 
    
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
     <div id="headcontainer"> 
 
     </div> 
 
       <div id="menu"> 
 
       <div id="logo"> 
 
        <p> 
 
         Hier komt een logo 
 
        </p> 
 
       </div> 
 
       <ul> 
 
        <li> 
 
         Home 
 
        </li> 
 
        <li> 
 
         Over 
 
        </li> 
 
        <li> 
 
         Contact 
 
        </li> 
 
        <li> 
 
         Producte 
 
        </li> 
 
       </ul> 
 
      </div> 
 
    
 
<div id="content"> 
 
<div class="text-box"> 
 

 

 
\t </div> 
 
\t <div class="text-box"> 
 

 

 
\t </div> 
 
</div> 
 

 
    </div> 
 
</body> 
 

 
</html>

Fiddle: https://jsfiddle.net/sank8893/mvmbtcby/3/

fonte

2016-06-03 10:03:20 Sankar

Il menu fisso non funziona

risposta

Problemi correlati