Trzymanie nagłówka zawsze w widoku

Projektuję swoją stronę i próbuję znaleźć sposób na utrzymanie nagłówka zawsze na ekranie.Trzymanie nagłówka zawsze w widoku

Dla przykładu, spójrz na this dłuższą stronę na Wikia.com. Zwróć uwagę, że podczas przewijania strony mały pasek narzędzi na dole pozostaje w jednym miejscu. Przewiń jednak do dolnej części strony i zobaczysz, że pasek narzędzi pozostaje w ustalonej pozycji, dopóki nie zniknie z widoku.

To jest to, co chciałbym zrobić, ale w odwrotnej kolejności. Miej nagłówek, który pozostaje na stałej pozycji na stronie internetowej, ale gdy nie był widoczny, niech będzie na górze.

Próbowałem spojrzeć na przykład na DynamicDrive.com (wyszukaj Skrypt zawartości Docku, ponieważ nie mogę opublikować innego linku), ale stwierdziłem, że było dla mnie zbyt roztrzęsione.

Czy ktoś może mi pomóc to zrobić?

Z góry dziękuję.
~ DragonXDoom

P.S. Teraz, jak zauważam, pole "Jak formatować" po prawej stronie pytania o przesłanie ma taki efekt.

Źródło

2010-12-30 DragonXDoom

Moja odpowiedź (która jest zatwierdzona przez PO) został usunięty z powodu do martwego łącza. Zaktualizowałem swoją odpowiedź za pomocą kodu i działającego dema na jsfiddle. Postaram się, aby moja odpowiedź nie została usunięta (nie mogę tego zrobić samodzielnie) ... –

HTML:

<div id="wrap"> 
    <div id="header"> HEADER </div> 
    <div id="navigation"> NAVIGATION </div> 
    <div id="content"> CONTENT </div>   
</div>

JavaScript:

(function() {  
    var nav = $('#navigation')[0], 
     top = $(nav).offset().top, 
     left, 
     height = $(nav).outerHeight(), 
     width = $(nav).width(), 
     fixedClass = 'fixed'; 

    function pageOffset() { 
     return window.pageYOffset || document.body.scrollTop; 
    } 

    $(window). 
      resize(function() { 
       left = $(nav).offset().left; 
      }). 
      scroll(function() { 
       $(nav).toggleClass(fixedClass, pageOffset() > top); 

       if ($(nav).hasClass(fixedClass)) { 
        $(nav). 
         css({ 'left': left, 'width': width }). 
         prev().css({ 'marginBottom': height }); 
       } else { 
        $(nav). 
         prev().andSelf().removeAttr('style'); 
       } 
      }). 
      trigger('resize');  
})();

żywo demo:http://jsfiddle.net/simevidas/Mx8hC/show/

Źródło

2010-12-30 02:55:17

Dziękuję bardzo! Właśnie o to chciałem! – DragonXDoom

Do rozwiązania tego problemu można użyć pozycjonowania CSS. Poniższy link zawiera instrukcje dotyczące tego, w co wierzysz.

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Edit: Przepraszam za błędne odczytanie, powinny one pracować dla nagłówków, jak również.

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

http://davidchambersdesign.com/css-fixed-position-headers/

nadzieję, że te pomoc.

Źródło

2010-12-30 02:19:16

+1 dla ustalonej pozycji – JustcallmeDrago

Przykro mi, powinienem być nieco bardziej przejrzysty. Nagłówek, który próbuję zmienić, nie jest najwyższym elementem na mojej stronie. Jeśli użyję pozycji: fixed, nagłówek po prostu unosi się na środku strony. Chcę spróbować zrobić tak, aby działał jak normalny element, dopóki użytkownik nie przewinie w dół, aby był poza zasięgiem. Następnie chciałbym, aby działał jak na tych nagłówkach, do których odwołujesz się w swoim poście. Dzięki, ale mi to nie pomogło. – DragonXDoom

Próba zrozumienia - tak, że element jest gdzieś pośrodku strony, a następnie użytkownik zaczyna przewijać, element styka się z górą strony, a następnie "kija", aby stać się nagłówkiem, czy tak? Mogę rozważyć rozwiązanie jQuery. Czy trzeba mieć wydarzenie, gdy element dotyka górnej części widocznej widoczki, czy nie ma pewności, czy istnieje? –

Zawsze pamiętaj, że jeśli chcesz przykleić nagłówek lub stopkę, możesz użyć { position : fixed; }.

więc zastosowanie CSS tak:

.header{ 
    top:0; 
    width:100%; 
    height:50px; 
    position:fixed; // this is the key 
}

Źródło

2010-12-30 02:45:19 Wazzzy

Jeśli chcesz, aby był przyklejony do góry, nawet gdy użytkownik przewija (tj. przyklejone do górnej części okna przeglądarki), użyj:

.top-bar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    margin: 0; 
}

Albo po prostu do tego strony:

.top-bar { 
    margin: 0; 
    width: 100%; 
}

Źródło

2011-10-16 08:57:54 bricker

//header// 

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title> 
     <meta name="Description" content="<?php echo $SITE_NAME;?>" /> 
     <meta name="robots" content="all, index, follow" /> 
     <meta name="distribution" content="global" /> 
     <link rel="shortcut icon" href="/favicon.ico" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
     <link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div id="container"> 
    <div id="header"> 
    <h1><?php echo SITE_NAME;?></h1> 
    </div> 
    <div id="navigation"> 
    <ul> 
    <li><a href="/photosharing/">Home</a></li> 
    <!-- 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Contact us</a></li>--> 
    </ul> 
    </div> 
    <div id="content"> 

//footer 


</div> 
<div id="footer"> 
     Copyright &copy; <?php echo SITE_NAME.' , '.date('Y');?> 
    </div> 
</body> 
</html> 

//css 
body,td,th { 
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #333; 
} 
body { 
    margin-left: 0px; 
    margin-top: 30px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
.maindiv{ width:690px; margin:0 auto;} 
.textbox{ padding:2px 4px; width:200px;} 
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;} 
#container 
{ 
    margin: 0 30px; 
    background: #fff; 
} 

#header 
{ 
    background: #ccc; 
    padding: 20px; 
} 

#header h1 { margin: 0; } 

#navigation 
{ 
    float: left; 
    width: 100%; 
    background: #333; 
} 

#navigation ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li 
{ 
    list-style-type: none; 
    display: inline; 
} 

#navigation li a 
{ 
    display: block; 
    float: left; 
    padding: 5px 10px; 
    color: #fff; 
    text-decoration: none; 
    border-right: 1px solid #fff; 
} 

#navigation li a:hover { background: #383; } 

#content 
{ 
    clear: left; 
    padding: 20px; 
} 

#content h2 
{ 
    color: #000; 
    font-size: 160%; 
    margin: 0 0 .5em; 
} 

#footer 
{ 
    background: #ccc; 
    text-align: right; 
    padding: 20px; 
    height: 1%; 
}

Źródło

2013-01-07 06:34:16 user1953692

Trzymanie nagłówka zawsze w widoku

Odpowiedz

Powiązane problemy