Jquery.sticky.min.js是一個jQuery插件,它可以使元素在頁面滾動時保持固定位置。這個插件為我們解決了在頁面瀏覽時需要一個固定的導航菜單的問題,當你向下滾動屏幕時,此插件可以讓你的導航菜單一直保持在屏幕頂部(或固定在任何你想要的位置)。
/* 基本用法 */ $(document).ready(function(){ $(".sticky").sticky({ topSpacing: 0 }); }); /* 使用 topSpacing 參數 */ $(document).ready(function(){ $(".sticky").sticky({ topSpacing: 40 }); }); /* 使用 bottomSpacing 參數 */ $(document).ready(function(){ $(".sticky").sticky({ bottomSpacing: 50 }); }); /* 指定參照元素 */ $(document).ready(function() { $(".sticky").sticky({ topSpacing: 0, bottomSpacing: 0, className: "my-sticky-class", getWidthFrom: "#container", responsiveWidth: true }); }); /* 綁定事件 */ $(document).ready(function(){ $(".sticky").on("sticky-start", function(){ console.log("Started"); }); $(".sticky").on("sticky-end", function(){ console.log("Ended"); }); });
這里是一些基本的使用方法。它提供了topSpacing和bottomSpacing參數,您可以使用這些參數來使元素固定在頁面的任何位置。此外,您還可以指定參照元素,綁定事件以及在響應式布局中使用此插件。
總的來說,jquery.sticky.min.js 是一個非常實用的插件,可以幫助您輕松實現網站中的一些常見功能。它易于使用,可以根據需要進行定制,并且具有兼容性和可靠性。