Css'de bir çapa paylaştırmanın bir yolu var mı?

Question

Sabit bir üstbilgi yüksekliğim 50px var. Vücudumda çok çapa var. Sorun şu ki, çapalara işaret eden bağlantıları tıklattığımda, bağlantı sabit başlığım altında görünür ve 50px içeriği kaybeder (üstbilginin altındaki içeriği okumak için 50px'e kaydırmam gerekir).

50px'lik bir çapa sahip olmanın bir yolu var mı? Bedenim .. kendi kendilerine arasında bir marj ile kutunun bir sürü (div'ler) ile doldurulur, bu yüzden yerinde 50px boş div koyun ve sonra ondan sonra demirlemek edemez

html:

<div id="header"></div> 
<div id="content"> 
    <div class="box" id="n1"></div> 
    <div class="box" id="n2"></div> 
    <div class="box" id="n3"></div> 
</div> 

css: başlık gerçekten o zaman sabit kaydırılabilir div sizin çapa koyun ise

#header{ 
    height: 40px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    position: fixed; 
    text-align: center; 
    z-index:2; 
} 

#content{ 
    padding-top: 50px; 
    margin: 0px; 
} 

.box { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align : top; 
    padding: 1.4%; /* Keep it in percent (%) */ 
    margin-bottom: 30px; 
    min-height: 200px; 
} 

Answer 1

. Ardından, bağlantıyı içeren div, tüm sayfa yerine kaydırılır. Keman'ı ziyaret edin ve bağlantıyı tıklayın1. Çapa2'ye gider. Ve benzeri.

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

css - set taşması varsayılan kaydırma önlemek için gövde üzerinde gizli. Üst ve alt set ile yeni içerik alanında mutlak pozisyon kullanın. Bu, geriye kalan viewport penceresine uyacak şekilde esnetmeye zorlar.

body { overflow: hidden; } 
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; } 
#content { 
    overflow: scroll; 
    position: absolute; 
    top: 50px; 
    bottom: 0px; 
    width: 100%; 
    border: 1px solid blue; 
} 

html

<div id="header">header</div> 
<div id="content"> 
    <div> 
     Page Content <br /> 
     <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>     
     <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a> 
    </div> 
</div>​ 

Answer 2

jQuery kullanıyorsanız, bu işlevi kullanın:

function scrollToAnchor() { 
    if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){ 
    var anchor = document.URL.split("#")[1]; 
    $(".jquery-anchor").each(function() { 
     if($(this).attr("name") == anchor) { 
      $("html,body").animate({ 
        scrollTop: $(this).offset().top - 50}, 
       'slow'); 
      } 
     }); 
    } 
} 

sonra Saf CSS çözüm için sizin çapa

Answer 3

için sınıf "jquery_anchor" add sadece oposited margin ile başka bir div kullanın :)

<style> 
.anchor { 
    margin-top: -50px; 
    margin-bottom: 50px; 
} 
</style> 

<div id="n1" class="anchor"></div> 
<div class="box"></div>