दिलचस्प पोस्ट
Android JellyBean पर Actionbar की ऊंचाई बदलें सेलेनियम वेबड्राइवर: लोड करने के लिए जावास्क्रिप्ट (जेएस) के साथ जटिल पृष्ठ की प्रतीक्षा करें कैसे सी में एक मेमोरी पता printf नए टैब पर स्विच किए बिना जावा में नया टैब कैसे खोल सकता है? मुझे संदेश क्यों प्राप्त हो रहा है, "घातक: यह काम एक काम के पेड़ में चलना चाहिए?" एक जावास्क्रिप्ट स्ट्रिंग एसक्यूएल दोस्ताना बनाने रेल प्राथमिक कुंजी और ऑब्जेक्ट आईडी टेक्स्टव्यू फिट करने के लिए टेक्स्ट फ़ॉन्ट आकार को कैसे समायोजित करें एनपी, एनपी-पूर्ण और एनपी-हार्ड के बीच अंतर क्या हैं? SQL सर्वर संग्रहीत कार्यविधि रिटर्न कोड विषमता यह जावास्क्रिप्ट regex काम क्यों नहीं करता है? लावल्यू रूपांतरण के लिए रैवल्यूज़ विज़ुअल स्टूडियो आईओएस जावास्क्रिप्ट के साथ 5 से कम संस्करण का पता लगाएं सेशनस्टेट और व्यूस्टेट के बीच अंतर क्या है? एक जार फ़ाइल के अंदर वर्गों के नाम कैसे प्राप्त करें?

स्क्रीन के शीर्ष पर एक डिवेल स्टिक को कैसे स्क्रॉल किया जा सकता है?

मैं एक डिवेल बनाना चाहूंगा, जो सामग्री के एक ब्लॉक के नीचे स्थित है, लेकिन जब एक बार पृष्ठ को शीर्ष सीमा से संपर्क करने के लिए पर्याप्त स्क्रॉल किया गया हो, तो वह जगह में तय हो जाता है और पृष्ठ के साथ स्क्रॉल हो जाता है। मुझे पता है कि मैंने इस ऑनलाइन का कम से कम एक उदाहरण देखा है लेकिन मैं इसे मेरे जीवन के लिए याद नहीं कर सकता

कोई विचार?

Solutions Collecting From Web of "स्क्रीन के शीर्ष पर एक डिवेल स्टिक को कैसे स्क्रॉल किया जा सकता है?"

आप बस सीएसएस का उपयोग कर सकते हैं, जो आपके तत्व को स्थिर के रूप में रख सकते हैं:

 .fixedElement { background-color: #c0c0c0; position:fixed; top:0; width:100%; z-index:100; } 

संपादित करें: आपके पास पूर्ण स्थिति वाला तत्व होना चाहिए, एक बार स्क्रॉल ऑफसेट तत्व तक पहुंच गया है, इसे फिक्स्ड में बदला जाना चाहिए, और शीर्ष स्थिति शून्य पर सेट होनी चाहिए।

आप scrollTop फ़ंक्शन के साथ दस्तावेज़ के शीर्ष स्क्रॉल ऑफसेट का पता लगा सकते हैं:

 $(window).scroll(function(e){ var $el = $('.fixedElement'); var isPositionFixed = ($el.css('position') == 'fixed'); if ($(this).scrollTop() > 200 && !isPositionFixed){ $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); } if ($(this).scrollTop() < 200 && isPositionFixed) { $('.fixedElement').css({'position': 'static', 'top': '0px'}); } }); 

जब स्क्रॉल ऑफ़सेट 200 पर पहुंचा, तो तत्व ब्राउज़र विंडो के ऊपर चिपकाएगा, क्योंकि इसे तय किया गया है।

आपने इस उदाहरण को Google Code के मुद्दे पृष्ठ पर और (केवल हाल ही में) स्टैक ओवरफ्लो के संपादन पृष्ठ पर देखा है।

जब आप वापस ऊपर स्क्रॉल करते हैं तो सीएमएस का उत्तर पोजीशनिंग में वापस नहीं आता है स्टैक अतिप्रवाह से यहां बेईमानी से चुरा हुआ कोड है:

 function moveScroller() { var $anchor = $("#scroller-anchor"); var $scroller = $('#scroller'); var move = function() { var st = $(window).scrollTop(); var ot = $anchor.offset().top; if(st > ot) { $scroller.css({ position: "fixed", top: "0px" }); } else { $scroller.css({ position: "relative", top: "" }); } }; $(window).scroll(move); move(); } 
 <div id="sidebar" style="width:270px;"> <div id="scroller-anchor"></div> <div id="scroller" style="margin-top:10px; width:270px"> Scroller Scroller Scroller </div> </div> <script type="text/javascript"> $(function() { moveScroller(); }); </script> 

और एक सरल लाइव डेमो

एक नवजात, स्क्रिप्ट मुक्त विकल्प position: sticky , जो क्रोम, फ़ायरफ़ॉक्स, और सफारी में समर्थित है HTML5Rocks और डेमो , और मोज़िला डॉक्स पर आलेख देखें।

मुझे आपके जैसी समस्या थी और इसे पूरा करने के लिए एक jQuery प्लगइन बना रहा। यह वास्तव में यहां सूचीबद्ध सभी समस्याओं का निराकरण करता है, साथ ही इसमें कुछ वैकल्पिक विशेषताओं को जोड़ता है

विकल्प

 stickyPanelSettings = { // Use this to set the top margin of the detached panel. topPadding: 0, // This class is applied when the panel detaches. afterDetachCSSClass: "", // When set to true the space where the panel was is kept open. savePanelSpace: false, // Event fires when panel is detached // function(detachedPanel, panelSpacer){....} onDetached: null, // Event fires when panel is reattached // function(detachedPanel){....} onReAttached: null, // Set this using any valid jquery selector to // set the parent of the sticky panel. // If set to null then the window object will be used. parentSelector: null }; 

https://github.com/donnyv/sticky-panel

डेमो: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm

और यहाँ है कैसे बिना jquery

 var startProductBarPos=-1; window.onscroll=function(){ var bar = document.getElementById('nav'); if(startProductBarPos<0)startProductBarPos=findPosY(bar); if(pageYOffset>startProductBarPos){ bar.style.position='fixed'; bar.style.top=0; }else{ bar.style.position='relative'; } }; function findPosY(obj) { var curtop = 0; if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; } curtop += obj.offsetTop; } else if (obj.y) curtop += obj.y; return curtop; } 
 * {margin:0;padding:0;} .nav { border: 1px red dashed; background: #00ffff; text-align:center; padding: 21px 0; margin: 0 auto; z-index:10; width:100%; left:0; right:0; } .header { text-align:center; padding: 65px 0; border: 1px red dashed; } .content { padding: 500px 0; text-align:center; border: 1px red dashed; } .footer { padding: 100px 0; text-align:center; background: #777; border: 1px red dashed; } 
 <header class="header">This is a Header</header> <div id="nav" class="nav">Main Navigation</div> <div class="content">Hello World!</div> <footer class="footer">This is a Footer</footer> 

जनवरी 2017 तक और क्रोम 56 की रिहाई, आम उपयोग में अधिकांश ब्राउज़र position: sticky का समर्थन करते position: sticky सीएसएस में position: sticky संपत्ति।

 #thing_to_stick { position: sticky; top: 0px; } 

फ़ायरफ़ॉक्स और क्रोम में मेरे लिए चाल है

सफारी में आपको अब भी position: -webkit-sticky का उपयोग करने की आवश्यकता है position: -webkit-sticky

Polyfills इंटरनेट एक्सप्लोरर और एज के लिए उपलब्ध हैं; https://github.com/wilddeer/stickyfill अच्छा लगता है

यह मैं कैसे jquery के साथ किया है। यह सब स्टैक ओवरफ्लो पर विभिन्न उत्तरों से एक साथ झुका हुआ था। यह समाधान तेजी से प्रदर्शन के लिए चयनकर्ताओं को कैश करता है और चिपचिपा बने चिपचिपा हो जाने पर भी "कूद" समस्या का समाधान करता है।

इसे jsfiddle पर देखें: http://jsfiddle.net/HQS8s/

सीएसएस:

 .stick { position: fixed; top: 0; } 

जे एस:

 $(document).ready(function() { // Cache selectors for faster performance. var $window = $(window), $mainMenuBar = $('#mainMenuBar'), $mainMenuBarAnchor = $('#mainMenuBarAnchor'); // Run this on scroll events. $window.scroll(function() { var window_top = $window.scrollTop(); var div_top = $mainMenuBarAnchor.offset().top; if (window_top > div_top) { // Make the div sticky. $mainMenuBar.addClass('stick'); $mainMenuBarAnchor.height($mainMenuBar.height()); } else { // Unstick the div. $mainMenuBar.removeClass('stick'); $mainMenuBarAnchor.height(0); } }); }); 

यहां एक और विकल्प है:

JAVASCRIPT

 var initTopPosition= $('#myElementToStick').offset().top; $(window).scroll(function(){ if($(window).scrollTop() > initTopPosition) $('#myElementToStick').css({'position':'fixed','top':'0px'}); else $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'}); }); 

आपका #myElementToStick position:absolute शुरू होना चाहिए position:absolute सीएसएस संपत्ति

मेरा समाधान थोड़ा कम है, लेकिन यह केन्द्रित लेआउट के लिए बाईं किनारे से चर पोजिशनिंग को संभालता है।

 // Ensurs that a element (usually a div) stays on the screen // aElementToStick = The jQuery selector for the element to keep visible global.makeSticky = function (aElementToStick) { var $elementToStick = $(aElementToStick); var top = $elementToStick.offset().top; var origPosition = $elementToStick.css('position'); function positionFloater(a$Win) { // Set the original position to allow the browser to adjust the horizontal position $elementToStick.css('position', origPosition); // Test how far down the page is scrolled var scrollTop = a$Win.scrollTop(); // If the page is scrolled passed the top of the element make it stick to the top of the screen if (top < scrollTop) { // Get the horizontal position var left = $elementToStick.offset().left; // Set the positioning as fixed to hold it's position $elementToStick.css('position', 'fixed'); // Reuse the horizontal positioning $elementToStick.css('left', left); // Hold the element at the top of the screen $elementToStick.css('top', 0); } } // Perform initial positioning positionFloater($(window)); // Reposition when the window resizes $(window).resize(function (e) { positionFloater($(this)); }); // Reposition when the window scrolls $(window).scroll(function (e) { positionFloater($(this)); }); }; 

दूसरों के साथ समस्याओं वाले उन लोगों के लिए प्रयास करने के लिए यहां एक और संस्करण है यह इस डुप्लिकेट प्रश्न में चर्चा की गई तकनीकों को खींचती है, और आवश्यक सहायक डीआईवी को गतिशील बनाता है इसलिए कोई अतिरिक्त HTML की आवश्यकता नहीं है।

सीएसएस:

 .sticky { position:fixed; top:0; } 

JQuery:

 function make_sticky(id) { var e = $(id); var w = $(window); $('<div/>').insertBefore(id); $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id); var n = e.next(); var p = e.prev(); function sticky_relocate() { var window_top = w.scrollTop(); var div_top = p.offset().top; if (window_top > div_top) { e.addClass('sticky'); n.show(); } else { e.removeClass('sticky'); n.hide(); } } w.scroll(sticky_relocate); sticky_relocate(); } 

एक तत्व चिपचिपा बनाने के लिए, करें:

 make_sticky('#sticky-elem-id'); 

जब तत्व चिपचिपा हो जाता है, कोड चिपचिपा तत्व द्वारा छोड़ा खाई में कूदने से शेष सामग्री की स्थिति का प्रबंधन करता है। यह चिपचिपा तत्व को इसके मूल गैर-चिपचिपा स्थिति में वापस देता है जब इसे ऊपर से स्क्रॉल किया जाता है।

यहाँ जोश ली के उत्तर के लिए एक विस्तारित संस्करण है। यदि आप चाहते हैं कि साइडबार पर दाईं ओर एक साइडबार हो, और किसी श्रेणी के भीतर फ़्लोट करें (यानी, आपको ऊपर और नीचे एंकर स्थिति निर्दिष्ट करने की आवश्यकता है)। जब आप इसे मोबाइल डिवाइस पर देखते हैं तो आपको बग को ठीक करता है (आपको बाईं स्क्रॉल की स्थिति की जांच करने की आवश्यकता है अन्यथा डिव स्क्रीन से निकलेगा)।

 function moveScroller() { var move = function() { var st = $(window).scrollTop(); var sl = $(window).scrollLeft(); var ot = $("#scroller-anchor-top").offset().top; var ol = $("#scroller-anchor-top").offset().left; var bt = $("#scroller-anchor-bottom").offset().top; var s = $("#scroller"); if(st > ot) { if (st < bt - 280) //280px is the approx. height for the sticky div { s.css({ position: "fixed", top: "0px", left: ol-sl }); } else { s.css({ position: "fixed", top: bt-st-280, left: ol-sl }); } } else { s.css({ position: "relative", top: "", left: "" }); } }; $(window).scroll(move); move(); } 

एक ही बात की खोज करते समय मैं इस पर आया था मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैंने सोचा कि मैं हाल ही में एक जवाब का प्रस्ताव दूँगा।

Scrollorama में एक 'पिन यह' सुविधा है जो कि मैं क्या देख रहा था।

http://johnpolacek.github.io/scrollorama/

इस अन्य प्रश्न का उत्तर देने के लिए प्रदान की गई जानकारी आपको मदद दे सकती है, इवान:

स्क्रॉलिंग के बाद तत्व दिखाई देने पर देखें

आप मूल रूप से तत्व की शैली को संशोधित करना चाहते हैं जिससे यह सत्यापित किया जा सके कि दस्तावेज़.body.scrollTop मान आपके तत्व के शीर्ष से बराबर या उससे अधिक है।

स्वीकार किए जाते हैं उत्तर काम करता है लेकिन अगर आप इसके ऊपर स्क्रॉल करते हैं तो पिछली स्थिति में वापस नहीं ले जाते हैं। वहां हमेशा रखा जाने के बाद यह शीर्ष पर कायम है।

  $(window).scroll(function(e) { $el = $('.fixedElement'); if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') { $('.fixedElement').css( 'position': 'fixed', 'top': '0px'); } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') { $('.fixedElement').css( 'relative': 'fixed', 'top': '42px'); //this was just my previous position/formating } }); 

जेलेदेव की प्रतिक्रिया काम करते हैं, लेकिन मैं इसे काम करने में सक्षम नहीं था। उनका उदाहरण पृष्ठ भी काम नहीं करता (मेरे लिए)

आप 3 अतिरिक्त पंक्तियों को जोड़ सकते हैं, जब उपयोगकर्ता शीर्ष पर वापस स्क्रॉल करे, तो डिव अपनी पुरानी जगह पर चिपकाएगा:

यहां कोड है:

 if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){ $('.fixedElement').css({'position': 'relative', 'top': '200px'}); } 

मेरे पास एक div में लिंक सेटअप है, इसलिए यह अक्षर और संख्या लिंक की एक लंबवत सूची है।

 #links { float:left; font-size:9pt; margin-left:0.5em; margin-right:1em; position:fixed; text-align:center; width:0.8em; } 

मैं तब लोड की स्थिति को बचाने के लिए इस आसान jQuery फ़ंक्शन को सेटअप करता हूं और फिर उस स्थिति से आगे स्क्रॉल करने पर स्थिति को ठीक करने के लिए परिवर्तित करता हूं।

नोट: लिंक केवल पृष्ठ लोड पर दिखाई देने पर ही कार्य करता है !!

 var listposition=false; jQuery(function(){ try{ ///// stick the list links to top of page when scrolling listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position(); console.log(listposition); $(window).scroll(function(e){ $top = $(this).scrollTop(); $el = jQuery('#links'); //if(typeof(console)!='undefined'){ // console.log(listposition.top,$top); //} if ($top > listposition.top && $el.css('position') != 'fixed'){ $el.css({'position': 'fixed', 'top': '0px'}); } else if ($top < listposition.top && $el.css('position') == 'fixed'){ $el.css({'position': 'static'}); } }); } catch(e) { alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)'); } }); 

मैंने इस तकनीक को बनाने के लिए ऊपर दिए गए कुछ काम का इस्तेमाल किया। मैंने इसे थोड़ा सुधार किया और सोचा कि मैं अपना काम साझा करूँगा उम्मीद है की यह मदद करेगा।

jsfuddle कोड

 function scrollErrorMessageToTop() { var flash_error = jQuery('#flash_error'); var flash_position = flash_error.position(); function lockErrorMessageToTop() { var place_holder = jQuery("#place_holder"); if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") { flash_error.css({ 'position': 'fixed', 'top': "0px", "width": flash_error.width(), "z-index": "1" }); place_holder.css("display", ""); } else { flash_error.css('position', ''); place_holder.css("display", "none"); } } if (flash_error.length > 0) { lockErrorMessageToTop(); jQuery("#flash_error").after(jQuery("<div id='place_holder'>")); var place_holder = jQuery("#place_holder"); place_holder.css({ "height": flash_error.height(), "display": "none" }); jQuery(window).scroll(function(e) { lockErrorMessageToTop(); }); } } scrollErrorMessageToTop();​ 

स्क्रॉल करने का एक तरीका यह थोड़ा और अधिक गतिशील है। इसके लिए कुछ काम की आवश्यकता होती है और मैं कुछ समय पर इसे प्लगिंग में बदलूंगा, परन्तु यह है कि मैं काम के घंटे के बाद आया हूं।

जावास्क्रिप्ट में आप यह कर सकते हैं:

 var element = document.getElementById("myid"); element.style.position = "fixed"; element.style.top = "0%"; 

सटीक समाधान नहीं बल्कि एक महान विकल्प पर विचार करना

इस सीएसएस केवल स्क्रीन स्क्रॉल पट्टी के शीर्ष पर केवल सीएसएस के साथ सभी समस्या हल, कोई जावास्क्रिप्ट, नहीं JQuery, कोई मस्तिष्क काम ( योग्य )।

मेरे बेला का आनंद लें: डी सभी कोड वहाँ में शामिल हैं 🙂

सीएसएस

 #menu { position: fixed; height: 60px; width: 100%; top: 0; left: 0; border-top: 5px solid #a1cb2f; background: #fff; -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); z-index: 999999; } .w { width: 900px; margin: 0 auto; margin-bottom: 40px; }<br type="_moz"> 

लंबे समय तक सामग्री रखो ताकि आप यहां प्रभाव देख सकें 🙂 ओह, और संदर्भ वहां भी है, इस तथ्य के लिए कि वह अपने क्रेडिट के योग्य है

सीएसएस केवल स्क्रीन स्क्रॉल पट्टी के ऊपर

यहां एक उदाहरण है जो jquery-visible प्लगइन का उपयोग करता है: http://jsfiddle.net/711p4em4/

HTML:

 <div class = "wrapper"> <header>Header</header> <main> <nav>Stick to top</nav> Content </main> <footer>Footer</footer> </div> 

सीएसएस:

 * { margin: 0; padding: 0; } body { background-color: #e2e2e2; } .wrapper > header, .wrapper > footer { font: 20px/2 Sans-Serif; text-align: center; background-color: #0040FF; color: #fff; } .wrapper > main { position: relative; height: 500px; background-color: #5e5e5e; font: 20px/500px Sans-Serif; color: #fff; text-align: center; padding-top: 40px; } .wrapper > main > nav { position: absolute; top: 0; left: 0; right: 0; font: 20px/2 Sans-Serif; color: #fff; text-align: center; background-color: #FFBF00; } .wrapper > main > nav.fixed { position: fixed; top: 0; left: 0; right: 0; } 

जेएस (jquery- दिखाई प्लगइन शामिल):

 (function($){ /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ var $w = $(window); $.fn.visible = function(partial,hidden,direction){ if (this.length < 1) return; var $t = this.length > 1 ? this.eq(0) : this, t = $t.get(0), vpWidth = $w.width(), vpHeight = $w.height(), direction = (direction) ? direction : 'both', clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; if (typeof t.getBoundingClientRect === 'function'){ // Use this native browser method, if available. var rec = t.getBoundingClientRect(), tViz = rec.top >= 0 && rec.top < vpHeight, bViz = rec.bottom > 0 && rec.bottom <= vpHeight, lViz = rec.left >= 0 && rec.left < vpWidth, rViz = rec.right > 0 && rec.right <= vpWidth, vVisible = partial ? tViz || bViz : tViz && bViz, hVisible = partial ? lViz || rViz : lViz && rViz; if(direction === 'both') return clientSize && vVisible && hVisible; else if(direction === 'vertical') return clientSize && vVisible; else if(direction === 'horizontal') return clientSize && hVisible; } else { var viewTop = $w.scrollTop(), viewBottom = viewTop + vpHeight, viewLeft = $w.scrollLeft(), viewRight = viewLeft + vpWidth, offset = $t.offset(), _top = offset.top, _bottom = _top + $t.height(), _left = offset.left, _right = _left + $t.width(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom, compareLeft = partial === true ? _right : _left, compareRight = partial === true ? _left : _right; if(direction === 'both') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); else if(direction === 'vertical') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); else if(direction === 'horizontal') return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); } }; })(jQuery); $(function() { $(window).scroll(function() { $(".wrapper > header").visible(true) ? $(".wrapper > main > nav").removeClass("fixed") : $(".wrapper > main > nav").addClass("fixed"); }); }); 

जैसा कि जोश ली और कॉलिन टी हार्ट ने कहा है, आप वैकल्पिक रूप से केवल position: sticky; top: 0; उपयोग कर सकते हैं position: sticky; top: 0; position: sticky; top: 0; div को आवेदन करना है कि आप स्क्रॉल करना चाहते हैं …

इसके अलावा, आपको केवल एक चीज को अपने पृष्ठ के शीर्ष पर कॉपी करना होगा या इसे बाहरी सीएसएस शीट में फिट करने के लिए प्रारूपित करना होगा:

 <style> #sticky_div's_name_here { position: sticky; top: 0; } </style> 

बस अपने #sticky_div's_name_here के नाम के साथ #sticky_div's_name_here को बदलें, अर्थात यदि आपका div <div id="example"> आप #example { position: sticky; top: 0; } #example { position: sticky; top: 0; } #example { position: sticky; top: 0; }

जब तक पाद लेख हिट नहीं करता तब चिपचिपा होता है:

 function stickyCostSummary() { var stickySummary = $('.sticky-cost-summary'); var scrollCostSummaryDivPosition = $(window).scrollTop(); var footerHeight = $('#footer').height(); var documentHeight = $(document).height(); var costSummaryHeight = stickySummary.height(); var headerHeight = 83; var footerMargin = 10; var scrollHeight = 252; var footerPosition = $('#footer').offset().top; if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) { stickySummary.removeAttr('style'); stickySummary.addClass('fixed'); } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) { stickySummary.removeClass('fixed'); stickySummary.css({ "position" : "absolute", "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px" }); } else { stickySummary.removeClass('fixed'); stickySummary.css({ "position" : "absolute", "top" : "0" }); } } $window.scroll(stickyCostSummary);