JS Bin

Add library

Add library
Run with JS
Save
Share
…

 
[DEFAULT]BASEURL=http://www.webopixel.net/javascript/435.html[DOC#63]BASEURL=http://cdn.api.b.hatena.ne.jp/entry/button/?url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.htmlORIGURL=javascript:false[DOC#65]BASEURL=https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&layout=button_count&show_faces=true&width=120&action=like&colorscheme=light&height=20ORIGURL=http://www.facebook.com/plugins/like.php?href=http://www.webopixel.net/javascript/435.html&layout=button_count&show_faces=true&width=120&action=like&colorscheme=light&height=20[DOC_aswift_0]BASEURL=http://www.webopixel.net/javascript/435.htmlORIGURL=[DOC_aswift_0_google_ads_frame1#53]BASEURL=http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9923893151467229&output=html&h=60&slotname=9338522750&adk=2695479646&w=468&lmt=1384219015&flash=11.9.900.117&url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&dt=1384219015648&bpp=15&bdt=98&shv=r20131105&cbv=r20130906&saldr=sa&correlator=1384219015711&frm=20&ga_vid=1207032675.1383194632&ga_sid=1384217596&ga_hid=618526900&ga_fc=1&u_tz=540&u_his=1&u_java=1&u_h=1080&u_w=1920&u_ah=1080&u_aw=1920&u_cd=24&u_nplug=0&u_nmime=0&dff=times%20new%20roman&dfs=14&adx=264&ady=434&biw=1445&bih=712&oid=3&ref=http%3A%2F%2Fwebdrawer.net%2Fjavascript%2Fjsscroll.html&docm=10&vis=2&fu=0&ifi=1&pfi=32&dtd=115&xpc=rAm9PAO2Zc&p=http%3A//www.webopixel.netORIGURL=[DOC#395]BASEURL=http://cdn.api.b.hatena.ne.jp/entry/button/?url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&layout=verticalORIGURL=javascript:false[DOC#397]BASEURL=https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&layout=box_count&show_faces=true&width=80&action=like&colorscheme=light&height=65ORIGURL=http://www.facebook.com/plugins/like.php?href=http://www.webopixel.net/javascript/435.html&layout=box_count&show_faces=true&width=80&action=like&colorscheme=light&height=65[DOC_aswift_1]BASEURL=http://www.webopixel.net/javascript/435.htmlORIGURL=[DOC_aswift_1_google_ads_frame2#55]BASEURL=http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9923893151467229&output=html&h=250&slotname=9332613478&adk=3503685209&w=300&lmt=1384219015&flash=11.9.900.117&url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&dt=1384219015863&bpp=14&bdt=313&shv=r20131105&cbv=r20130906&saldr=sa&prev_slotnames=9338522750&correlator=1384219015711&frm=20&ga_vid=1207032675.1383194632&ga_sid=1384217596&ga_hid=618526900&ga_fc=1&u_tz=540&u_his=1&u_java=1&u_h=1080&u_w=1920&u_ah=1080&u_aw=1920&u_cd=24&u_nplug=0&u_nmime=0&dff=times%20new%20roman&dfs=14&adx=913&ady=164&biw=1445&bih=712&oid=3&ref=http%3A%2F%2Fwebdrawer.net%2Fjavascript%2Fjsscroll.html&docm=10&vis=2&fu=0&ifi=2&dtd=105&xpc=DQVrJ8RtoN&p=http%3A//www.webopixel.netORIGURL=[DOC_aswift_2]BASEURL=http://www.webopixel.net/javascript/435.htmlORIGURL=[DOC_aswift_2_google_ads_frame3_hybrid_iframe]BASEURL=http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9923893151467229&output=html&h=600&slotname=7840165003&adk=1785405550&w=300&lmt=1384219016&flash=11.9.900.117&url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&dt=1384219015926&bpp=14&bdt=376&shv=r20131105&cbv=r20130906&saldr=sa&prev_slotnames=9338522750%2C9332613478&correlator=1384219015711&frm=20&ga_vid=1207032675.1383194632&ga_sid=1384217596&ga_hid=618526900&ga_fc=1&u_tz=540&u_his=1&u_java=1&u_h=1080&u_w=1920&u_ah=1080&u_aw=1920&u_cd=24&u_nplug=0&u_nmime=0&dff=times%20new%20roman&dfs=14&adx=913&ady=1675&biw=1445&bih=712&oid=3&ref=http%3A%2F%2Fwebdrawer.net%2Fjavascript%2Fjsscroll.html&docm=10&vis=1&fu=0&ifi=3&dtd=1012&xpc=K1yFcXALcf&p=http%3A//www.webopixel.netORIGURL=[DOC_aswift_2_google_ads_frame3_hybrid_iframe#55]BASEURL=http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9923893151467229&output=html&h=600&slotname=7840165003&adk=1785405550&w=300&lmt=1384219016&flash=11.9.900.117&url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F435.html&dt=1384219015926&bpp=14&bdt=376&shv=r20131105&cbv=r20130906&saldr=sa&prev_slotnames=9338522750%2C9332613478&correlator=1384219015711&frm=20&ga_vid=1207032675.1383194632&ga_sid=1384217596&ga_hid=618526900&ga_fc=1&u_tz=540&u_his=1&u_java=1&u_h=1080&u_w=1920&u_ah=1080&u_aw=1920&u_cd=24&u_nplug=0&u_nmime=0&dff=times%20new%20roman&dfs=14&adx=913&ady=1675&biw=1445&bih=712&oid=3&ref=http%3A%2F%2Fwebdrawer.net%2Fjavascript%2Fjsscroll.html&docm=10&vis=1&fu=0&ifi=3&dtd=1012&xpc=K1yFcXALcf&p=http%3A//www.webopixel.netORIGURL=[{000214A0-0000-0000-C000-000000000046}]Prop3=19,2[InternetShortcut]URL=http://www.webopixel.net/javascript/435.htmlIDList=IconFile=http://www.webopixel.net/favicon.icoIconIndex=1
​

 
​
//ele=固定する要素、flag=サイドバーに固定する要素があり、フッターにかぶらないようにする場合に「1」を指定function floatBox(ele, flag) {    //固定する要素を取得    var box = $(ele);    //固定する要素の位置を取得    var fixed_box_offset = box.offset();    //固定する要素のサイズを取得    var box_size = {"width": box.width(), "height":  box.height()};    //フッター要素の位置を取得    var footer_box_offset = $("#footer").offset();    //スクロールイベントが発生したら実行    $(window).scroll(function() {        //スクロール位置を取得        var scroll_val = $(this).scrollTop();        //固定する要素の位置よりスクロール位置が大きくなれば...        if(scroll_val > fixed_box_offset.top) {            //固定する要素にtop:0が指定されていなければ...            if(box.css("top") !== 0) {                //スタイルを追加                box.css({                    "position": "fixed",                    "z-index": 999,                    "width": box_size.width,                    "height": box_size.height,                    "top": 0,                    "bottom": "auto"                });            }            //フッターがあり、横メニューがかぶらないようにする場合は...            if(flag == 1) {                //フッターの位置よりスクロール位置が大きくなれば...                if(scroll_val > (footer_box_offset.top - box_size.height)) {                    //スタイルを追加                    if(box.css("bottom") !== 0) {                        box.css({                            "position": "absolute",                            "z-index": 999,                            "width": box_size.width,                            "height": box_size.height,                            "top": "auto",                            "bottom": 0                        });                    }                }            }        //固定する要素の位置よりスクロール位置が小さければ...        } else {            //固定する要素のstyle属性を削除            box.removeAttr("style");        }    });}​

Output Auto-run JS

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x

Keyboard Shortcuts

Shortcut	Action
ctrl + [num]	Toggle nth panel
Require alt key, leaving cmd+1, 2 etc for tab switching.
ctrl + 0	Close focused panel
ctrl + enter	Re-render output. If console visible: run JS in console
Ctrl + l	Clear the console
ctrl + /	Toggle comment on selected lines
ctrl + ]	Indents selected lines
ctrl + [	Unindents selected lines
tab	Code complete & Emmet expand
ctrl + shift + L	Beautify code in active panel
ctrl + s	Save & lock current Bin from further changes
ctrl + shift + s	Open the share options
ctrl + y	Archive Bin
Complete list of JS Bin shortcuts

JS Bin URLs

URL	Action
/	Show the full rendered output. This content will update in real time as it's updated from the /edit url.
/edit	Edit the current bin
/watch	Follow a Code Casting session
/embed	Create an embeddable version of the bin
/latest	Load the very latest bin (/latest goes in place of the revision)
/[username]/last	View the last edited bin for this user
/[username]/last/edit	Edit the last edited bin for this user
/[username]/last/watch	Follow the Code Casting session for the latest bin for this user
/quiet	Remove analytics and edit button from rendered output
.js	Load only the JavaScript for a bin
.css	Load only the CSS for a bin
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.

public

Bin info

anonymouspro

6 Oct 2014

0viewers

JS Bin features

Pro features

Blog

Help

Donate to JS Bin ❤