Wie man ein Element an den Anfang der Seite kleben lässt, bedenkt man, dass es nicht anfänglich ist

Ich versuche ein Element zu bekommen, das oben auf der Seite zu sehen ist und mein Code sieht ungefähr so aus ...Wie man ein Element an den Anfang der Seite kleben lässt, bedenkt man, dass es nicht anfänglich ist

<nav> 
 
    <ul> 
 
     <li id="1"><a href="index.html">Home</a></li> 
 
     <li id="2"><a href="services.html"><i class="fa fa-breifcase"></i> Services</a></li> 
 
     <li id="3"><a href="about.html"><i class="fa fa-info-circle"></i> About</a></li> 
 
     <li id="4"><a href="contact.html"><i class="fa fa-paper-plane"></i> Contact</a></li> 
 
     <br><hr color='black' height='5px'> 
 
    </ul> 
 
    </nav> 
 
    <content> 
 
    <div class="intro"> 
 
     <h1 class="shadow">Hello</h1> 
 
     <form name="intro-form" action=""> 
 
     <input type="text" class="intro-text" placeholder="Hey what's your name?"></input> 
 
     <input type="submit" class="intro-submit" value="Go!" onclick="function val()"></input> 
 
     </form> 
 
     <div id='menu' class="menu"> 
 
     <h2 class="togglemenu"><i class='fa fa-cog fa-spin'></i> Options</p> 
 
     </div> 
 
     <a class="down">Scroll <i class="fa fa-arrow-down"></i> Down</a> 
 
    </div> 
 
    <script src='https://lirancohen.github.io/stickUp/js/stickUp.min.js'></script> 
 
<script src='https://lirancohen.github.io/stickUp/js/jquery.js'></script> 
 
    <script type="text/javascript"> 
 
     //initiating jQuery 
 
     jQuery(function($) { 
 
     $(document).ready(function() { 
 
      //enabling stickUp on the '.navbar-wrapper' class 
 
      $('.menu').stickUp(); 
 
     }); 
 
     }); 
 

 
    </script>

das einzige Problem ist, dass es nicht wie erwartet funktioniert, ich habe eine Menge Dinge ausprobiert - eine frühere Version von jquery aus der Google CDN und downlaoded Stickup geladen. Jede Hilfe oder alternative Methoden würden sehr geschätzt werden.

Quelle

2016-07-15 Captain Anonymous

Verwendung CSS-position: fixed? – errand

_bedenkt, dass es anfangs nicht da ist ... Was meinst du damit? – Jai

@Jai Ich denke, er meint Benutzer muss scrollen, um es zu erreichen :) –

Es besteht keine Notwendigkeit für ein anderes Plugin als jquery:

var $window = $(window), 
 
    $stickyEl = $('.sticky_div'), //here you specify class of the thing you want to be 
 
    //sticky 
 
    elTop = $stickyEl.offset().top; 
 

 
$window.scroll(function() { 
 
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.sticky_div { 
 
    background: red 
 
} 
 
.sticky { 
 
    position: fixed; 
 
    top: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <nav> 
 
    <ul> 
 
     <li id="1"><a href="index.html">Home</a> 
 
     </li> 
 
     <li id="2"><a href="services.html"><i class="fa fa-breifcase"></i> Services</a> 
 
     </li> 
 
     <li id="3"><a href="about.html"><i class="fa fa-info-circle"></i> About</a> 
 
     </li> 
 
     <li id="4"><a href="contact.html"><i class="fa fa-paper-plane"></i> Contact</a> 
 
     </li> 
 
     <br> 
 
     <hr color='black' height='5px'> 
 
    </ul> 
 
    </nav> 
 
    <content> 
 
    <div class="intro"> 
 
     <h1 class="shadow">Hello</h1> 
 
     <form name="intro-form" action=""> 
 
     <input type="text" class="intro-text" placeholder="Hey what's your name?"></input> 
 
     <input type="submit" class="intro-submit" value="Go!" onclick="function val()"></input> 
 
     </form> 
 
     <div id='menu' class="menu sticky_div"> 
 
     <h2 class="togglemenu"><i class='fa fa-cog fa-spin'></i> Options</p> 
 
     </div> 
 
     <a class="down">Scroll <i class="fa fa-arrow-down"></i> Down</a> 
 
    </div> 
 
    <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> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    
 
</body> 
 
</body> 
 
</body>

EDITED zu Ihrem Beispiel :)

Quelle

2016-07-15 07:42:28

Dies funktioniert nicht auf mobilen Geräten aus irgendeinem Grund –

lassen Sie mich überprüfen, aber einige mobile Geräte unterstützen keine feste Position Eigenschaft. –

mein Telefon arbeitet damit :) es ist über Browser, den Sie auf diesem Telefon verwenden, es nicht unterstützt 'Position: feste' Eigenschaft, versuchen Sie mit anderen Browser und gleichen Telefon :) –

Ich kann vorschlagen, dass Sie diese:

Wenn stickUp Bibliothek jQuery benötigt, dann sollte es nach jQuery geladen werden.
Wenn das Element anfänglich nicht vorhanden ist, können Sie eine Bedingung haben.

<script src='https://lirancohen.github.io/stickUp/js/jquery.js'></script> 
<script src='https://lirancohen.github.io/stickUp/js/stickUp.min.js'></script> 
<script type="text/javascript"> 
    //initiating jQuery 
    jQuery(function($) { 
    $(document).ready(function() { 
     //enabling stickUp on the '.navbar-wrapper' class 
     if($('.menu').length){ 
     $('.menu').stickUp(); 
     } 
    }); 
    }); 
</script>

Quelle

2016-07-15 07:29:16 Jai

Wie man ein Element an den Anfang der Seite kleben lässt, bedenkt man, dass es nicht anfänglich ist

Antwort

Verwandte Themen