I'm kinda new to creating websites, so bear with me.
I just started a new project and I wanted a menu that follows when you scroll, and then stops when it reaches the top of the page. I found a really cool JavaScript plugin called "StickyPanel"
( https://code.google.com/p/sticky-panel/ ), but it won't cooperate. Apparently there are no instructions and I can't find any useful info else where.
The code is very simple:
<script src="js/jquery.js"></script>
<script src="js/jquery.stickyPanel.min.js"></script>
<!-----Sticky Panel------>
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
afterDetachCSSClass: "",
savePanelSpace: true
};
$("header").stickyPanel(stickyPanelOptions);
});
</script>
<script>
$(document).ready(function(){
$(".nav-button").click(function () {
$(".nav-button,.menu").toggleClass("open");
});
});
</script>
<!-----Sticky Panel------>
Then I made a div
class called "header" and then styled the header-menu. I can't get the JavaScript to do anything with my header. What am I doing wrong?
$("header").stickyPanel(stickyPanelOptions);
You ask Jquery for the elemet header You need to ask jquery the class header =>
$(".header").stickyPanel(stickyPanelOptions);
Read about slectors its usefull!
<header> is a html5 element, support by almost all browser but dont forget display: block in css!
使用$(".header")
而不是$("header")
选择div
There is another way to it if you don't want to use this plugin. found this code somewhere on internet. it uses position:fixed
css style, simple js
javascript
<script type="text/javascript">
window.onload = function () {
$(window).scroll(function () {
var e = $("#StickyPanel");
if (document.documentElement.scrollTop >= 602 || window.pageYOffset >= 602) {
if ($.browser.msie && $.browser.version == "6.0")
{
e.css("top", document.documentElement.scrollTop + 15 + "px") }
else {
e.css({ position: "fixed", top: "1%" }) } }
else if (document.documentElement.scrollTop < 602 || window.pageYOffset < 602)
{
e.css({ position: "absolute", top: "91%" }) } }) }
</script>
css
#search
{
position: absolute;
top: 91%;
}
just change the values
602
according to your needs
Hope it helps.
This is what you are asking for: JSFIDDLE jsfiddle demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.