{"id":2356,"date":"2013-10-15T23:25:34","date_gmt":"2013-10-15T15:25:34","guid":{"rendered":"https:\/\/sdeno.com\/?p=2356"},"modified":"2013-10-15T23:30:55","modified_gmt":"2013-10-15T15:30:55","slug":"jquery%e6%a8%a1%e4%bb%bf%e6%b7%98%e5%ae%9d%e9%a6%96%e9%a1%b5%e4%be%a7%e8%be%b9%e6%8c%87%e5%ae%9a%e5%8c%ba%e5%9f%9f%e5%9b%ba%e5%ae%9a%e6%82%ac%e6%b5%ae%e6%95%88%e6%9e%9cjquery-scroll-follow","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=2356","title":{"rendered":"jquery\u6a21\u4eff\u6dd8\u5b9d\u9996\u9875\u4fa7\u8fb9\u6307\u5b9a\u533a\u57df\u56fa\u5b9a\u60ac\u6d6e\u6548\u679cJQUERY SCROLL FOLLOW"},"content":{"rendered":"<h3>OVERVIEW<\/h3>\n<p>Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. Scroll Follow has been successfully tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. It has been successfully tested on FF3 and Safari 3 on MacOSX.<\/p>\n<h3>REQUIREMENTS<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.jquery.com\/\">jQuery<\/a>\u00a0(tested with 1.2.6)<\/li>\n<li><a href=\"http:\/\/ui.jquery.com\/\">jQuery UI Core<\/a>\u00a0(tested with 1.5.2)<\/li>\n<\/ul>\n<h3>OPTIONAL<\/h3>\n<ul>\n<li><a href=\"http:\/\/gsgd.co.uk\/sandbox\/jquery\/easing\/\">jQuery Easing Plugin<\/a><\/li>\n<li><a href=\"http:\/\/www.stilbuero.de\/2006\/09\/17\/cookie-plugin-for-jquery\/\">jQuery Cookie Plugin<\/a><\/li>\n<\/ul>\n<h3>INSTALLATION<\/h3>\n<ol>\n<li>Include jQuery:\n<div>\n<ol>\n<li>&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;jquery.js&#8221;&gt;&lt;\/script&gt;<\/li>\n<\/ol>\n<\/div>\n<\/li>\n<li>Include required plugins, including Scroll Follow:\n<div>\n<ol>\n<li value=\"2\">&lt;script\u00a0type=&#8221;text\/javascript&#8221;\u00a0src=&#8221;ui.core.js&#8221;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script\u00a0type=&#8221;text\/javascript&#8221;\u00a0src=&#8221;jquery.scrollFollow.js&#8221;&gt;&lt;\/script&gt;<\/li>\n<\/ol>\n<\/div>\n<\/li>\n<li>Call Scroll Follow on the desired DOM object:<br \/>\n<a href=\"http:\/\/kitchen.net-perspective.com\/sf-example-1.html\">View Example<\/a><\/p>\n<div>\n<ol>\n<li value=\"4\">&lt;script\u00a0type=&#8221;text\/javascript&#8221;&gt;<\/li>\n<li>\u00a0\u00a0$(\u00a0&#8216;#example&#8217;\u00a0).scrollFollow();<\/li>\n<li>&lt;\/script&gt;<\/li>\n<\/ol>\n<\/div>\n<\/li>\n<li>Or call Scroll Follow on the desired DOM object and give it some parameters:<br \/>\n<a href=\"http:\/\/kitchen.net-perspective.com\/sf-example-2.html\">View Example<\/a><\/p>\n<div>\n<ol>\n<li value=\"7\">&lt;script type=&#8221;text\/javascript&#8221;&gt;<\/li>\n<li>\u00a0$(\u00a0document\u00a0).ready(\u00a0function\u00a0()\u00a0{<\/li>\n<li>\u00a0\u00a0\u00a0$( &#8216;#example&#8217; ).scrollFollow(\u00a0{<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0speed: 1000,<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0offset: 60,<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0killSwitch: &#8216;exampleLink&#8217;,<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0onText: &#8216;Disable Follow&#8217;,<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0offText: &#8216;Enable Follow&#8217;<\/li>\n<li>\u00a0\u00a0\u00a0}\u00a0);<\/li>\n<li>\u00a0}\u00a0);<\/li>\n<li>&lt;\/script&gt;<\/li>\n<\/ol>\n<\/div>\n<\/li>\n<li>The Scroll Follow object will remain inside its immediate container.<br \/>\n<a href=\"http:\/\/kitchen.net-perspective.com\/sf-example-3.html\">View Example<\/a><\/li>\n<li>Or you can specify a parent (by ID) for the Scroll Follow object to consider its container:<br \/>\n<a href=\"http:\/\/kitchen.net-perspective.com\/sf-example-4.html\">View Example<\/a><\/p>\n<div>\n<ol>\n<li value=\"7\">&lt;script\u00a0type=&#8221;text\/javascript&#8221;&gt;<\/li>\n<li>\u00a0$(\u00a0document\u00a0).ready(\u00a0function\u00a0()\u00a0{<\/li>\n<li>\u00a0\u00a0$(\u00a0&#8216;#example&#8217;\u00a0).scrollFollow(\u00a0{<\/li>\n<li>\u00a0\u00a0\u00a0container:\u00a0&#8216;outer&#8217;<\/li>\n<li>\u00a0\u00a0}\u00a0);<\/li>\n<li>\u00a0}\u00a0);<\/li>\n<li>&lt;\/script&gt;<\/li>\n<\/ol>\n<\/div>\n<\/li>\n<li>Scroll Follow uses the &#8220;top&#8221; property of an object to slide it. Therefore, the &#8220;position&#8221; of the object must be set to either &#8220;relative&#8221; or &#8220;absolute.&#8221; Other than that limitation, the Scroll Follow object should be completely configured through CSS.<\/li>\n<li><a href=\"http:\/\/kitchen.net-perspective.com\/open-source\/scroll-follow\/\">http:\/\/kitchen.net-perspective.com\/open-source\/scroll-follow\/<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>OVERVIEW Scroll Follow is a simple jQuery plugin that e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,13],"tags":[],"class_list":["post-2356","post","type-post","status-publish","format-standard","hentry","category-11","category-jquery"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/2356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2356"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/2356\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}