<span style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;">스크롤 관련 스크립트를 짜다가</span> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;">스크롤된 위치에 해당하는 엘리먼트의 아이디와 같은 해시태그를 가진</div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;">a태그에 selected 클래스가 자동으로 추가 및 제거 되는 <b>매우 간단한</b> 스크립트를 짜는데</div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;">어째 자꾸 오류가 나고, 스크립트 구성이 안떠올라서 어제 저녁에 야근하면서 3시간동안 <span style="line-height:16.8px;font-size:9pt;">끙끙댔습니다.</span></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><span style="line-height:16.8px;font-size:9pt;">"이게 왜 안되지?", "아, 이거 아무리 생각해도 간단한 루틴인데 왜 안만들어지지?", "왜이렇게 머리가 안돌아가지?"</span></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><span style="line-height:16.8px;font-size:9pt;">이런 생각만 자꾸 들다가 열받아서 때려치고 그냥 퇴근했는데</span></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;">오늘 아침에 출근해서 15분만에 만들었습니다.</div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;">안될땐 그냥 내일 하세요</div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;list-style:none;margin:0px;padding:0px;line-height:16.8px;"><br></div> <div style="list-style:none;margin:0px;padding:0px;"><div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201510/1446167786YLXvlTLIZ72r6A7T.jpg" width="480" height="480" alt="2089293588_Yhsi92OG_GnXlZ91B.jpeg" style="border:none;"></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;">PS : 아, 절 허탈하게 만든 소스는 아래와 같습니다</div> <div style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;text-align:left;"><br></div> <div style="text-align:left;"> <div><font face="돋움, dotum, Helvetica, sans-serif"><span style="line-height:16.8px;">$<b>(</b><font color="#7030a0">window,document</font><b>)</b>.on<b>(</b><font color="#00b0f0">'scroll'</font>,<b>function(</b>e<b>){</b></span></font></div></div></div><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>var</b> top <font color="#0070c0">=</font> $<b>(</b><font color="#7030a0">document</font><b>)</b>.scrollTop<b>()</b>;</span><br><span style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;white-space:pre;font-size:9pt;"> </span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>var</b> ele <font color="#0070c0">=</font> $(<font color="#00b0f0">'.businessContent > div'</font><b>)</b>;</span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>for(</b> <b>var</b> i <font color="#0070c0">=</font> <font color="#ff0000">0</font> ; i <font color="#0070c0">< </font>ele.length ; i<font color="#0070c0">++</font> <b>){</b></span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>var</b></span><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;">eletop <font color="#0070c0">=</font> ele.eq<b>(</b>i<b>)</b>.offset<b>()</b>.top <font color="#0070c0">-</font> <font color="#ff0000">140</font>,</span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;">elebottom <font color="#0070c0">=</font> eletop <font color="#0070c0">+</font> ele.eq<b>(</b>i<b>)</b>.height<b>()</b></span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>if(</b> top <font color="#0070c0">>=</font> eletop <font color="#0070c0">&&</font> top <font color="#0070c0">< </font>elebottom <b>){</b></span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>var</b> hashid <font color="#0070c0">= </font>ele.eq<b>(</b>i<b>)</b>.prop<b>(</b><font color="#00b0f0">'id'</font><b>)</b>;</span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>var</b> hashobj <font color="#0070c0">=</font> $<b>(</b><font color="#00b0f0">'.businessCategories > ul > li > a[href=#'</font> <font color="#0070c0">+</font> hashid <font color="#0070c0">+</font> <font color="#00b0f0">']'</font><b>)</b>;</span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;">$<b>(</b><font color="#00b0f0">'.businessCategories > ul > li'</font><b>)</b>.removeClass<b>(</b><font color="#00b0f0">'selected'</font><b>)</b>;</span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;">hashobj.closest<b>(</b><font color="#00b0f0">'li'</font><b>)</b>.addClass<b>(</b>'<font color="#00b0f0">selected'</font><b>)</b>;</span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>}</b></span><br><span class="Apple-tab-span" style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;white-space:pre;"> </span><span style="line-height:16.8px;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:9pt;"><b>}</b></span><span style="font-family:'돋움', dotum, Helvetica, sans-serif;line-height:16.8px;white-space:pre;font-size:9pt;"> </span><br><div style="list-style:none;margin:0px;padding:0px;"><div style="text-align:left;"> <div><font face="돋움, dotum, Helvetica, sans-serif"><span style="line-height:16.8px;"><b>})</b>;</span></font></div></div></div> <div style="list-style:none;margin:0px;padding:0px;"><br></div> <div style="list-style:none;margin:0px;padding:0px;"><br></div> <div style="list-style:none;margin:0px;padding:0px;"><br></div> <div style="list-style:none;margin:0px;padding:0px;"><br></div> <div style="list-style:none;margin:0px;padding:0px;"><br></div> <div style="list-style:none;margin:0px;padding:0px;">PS2 : 이걸 못만들어서 3시간이나 끙끙댔다니! 아우 쪽팔려 ㅋㅋㅋㅋ</div>
댓글 분란 또는 분쟁 때문에 전체 댓글이 블라인드 처리되었습니다.