Bootstrap # navbar-fixed-top с помощью jquery

Question

Я пытаюсь сделать bootstrap navbar-fixed-top с помощью бутстрапа. Я просто использую Document.body для динамического заполнения. Это не работает. Кто-нибудь теперь может быть причиной? Пожалуйста, дайте мне знать.

HTML:

<nav class="navbar navbar-default navbar-fixed-top" id="topnavbar"> 
    <div class="container">Hedaer 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
    </div> 
</nav> 
<article> 
    <h3>Contents</h3> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/>testtesttesttesttesttesttesttesttesttesttesttes <br/><br/>testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/>testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    testtesttesttesttesttesttesttesttesttesttesttes <br/><br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
</article> 

Javascript:

$(function() { 
    var article = document.createElement("article"); 

    $(document.body.appendChild(article)).css('padding-top', $('#topnavbar').height() + 70); 

    $(window).resize(function() { 
     $(document.body.appendChild(article)).css('padding-top', $('#topnavbar').height() + 70); 
    }); 
}); 

jsfiddle.net/drg6oe81/2/

Answer 1

Не уверен, что именно вы пытаетесь спросить, но вы не добавляя отступы в ваша статья должным образом. Вы использовали

$(document.body.appendChild(article)) 

Это работает.

$('article') 

http://jsfiddle.net/drg6oe81/5/

Если вы спрашиваете, как добавлять элементы, то вам нужно поместить в список. Вот пример:

http://jsfiddle.net/drg6oe81/8/

Answer 2

Используйте 'тело', чтобы применить прокладку к корпусу, как:

$('body').css('padding-top', $('#topnavbar').height() + 70); 

См this updated fiddle