दिलचस्प पोस्ट
एंड्रॉइड अलार्म मैनेजर – आरटीसी_वैक्यूप बनाम एलेक्सिडियल टाइमम WAKEUP जावास्क्रिप्ट में स्प्रेड ऑपरेटर का कई बार उपयोग करना? सी # में सापेक्ष समय की गणना करें सी में एक समारोह में realloc का उपयोग कैसे करें जेवा में एक्सेल शीट पढ़ने के लिए बेहतर एपीआई क्या है – जेएक्सएल या अपाचे पीओआई अनिर्धारित निरंतर माईस्क्ल कम्पाट :: माइस्किलरिस (एमएमएस 2 आर मणि का उपयोग करना) Android में AsyncTask के लिए सामान्य वर्ग? IOS में मूल JSON समर्थन? वहाँ स्ट्रिंग के लिए एक विकल्प है। जगह है कि मामला असंवेदनशील है? वसंत MVC में सभी नियंत्रक कैसे खोजें? फ़ाइलें और छोरें मिलाएं एक फ़ाइल के लिए गिटेट की विशेषताएं और व्यक्तिगत मर्ज रणनीति मैं टेंसरफ्लो में बैच सामान्यीकरण का उपयोग कैसे कर सकता हूं? Doxygen के साथ एक परिचय पृष्ठ कैसे करें किसी भी फ़ाइल के एन्कोडिंग को खोजने के लिए प्रभावी तरीका

jQuery – स्टिकी हेडर जो नीचे स्क्रॉल करते समय छोटा हो जाता है

मुझे आश्चर्य है कि कैसे एक चिपचिपा हेडर (ऐनिमेशन के साथ) सिकुड़ने के लिए जब आप पृष्ठ को नीचे स्क्रॉल करते हैं और सामान्य स्थिति में वापस जाता है जब पृष्ठ शीर्ष पर स्क्रॉल होता है स्पष्ट करने के दो उदाहरण यहां दिए गए हैं:

Home – Landing Page

Homepage

मैं इसे तय करने के लिए भाग लेता हूं, लेकिन जब उपयोगकर्ता स्क्रॉल करता है तो मैं अपने हेडर को कम करने के लिए कैसे करूँ?

अनेक अनेक धन्यवाद

Solutions Collecting From Web of "jQuery – स्टिकी हेडर जो नीचे स्क्रॉल करते समय छोटा हो जाता है"

यह आपको jQuery का उपयोग करने के लिए क्या करना चाहिए।

$(function(){ $('#header_nav').data('size','big'); }); $(window).scroll(function(){ if($(document).scrollTop() > 0) { if($('#header_nav').data('size') == 'big') { $('#header_nav').data('size','small'); $('#header_nav').stop().animate({ height:'40px' },600); } } else { if($('#header_nav').data('size') == 'small') { $('#header_nav').data('size','big'); $('#header_nav').stop().animate({ height:'100px' },600); } } }); 

प्रदर्शन: http://jsfiddle.net/jezzipin/JJ8Jc/

यहां जेज़िपिन के समाधान का एक सीएसएस एनिमेशन कांटा, स्टाइल से कोड को अलग करने के लिए।

जे एस:

 $(window).on("scroll touchmove", function () { $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0); }); 

सीएसएस:

 .header { width:100%; height:100px; background: #26b; color: #fff; position:fixed; top:0; left:0; transition: height 500ms, background 500ms; } .header.tiny { height:40px; background: #aaa; } 

http://jsfiddle.net/sinky/S8Fnq/

"$ (दस्तावेज़) .scrollTop ()" 0 से अधिक है, अगर स्क्रॉल / टच एमव्यू पर सीएसएस वर्ग "छोटे" को "#header_nav" पर सेट किया गया है।

सीएसएस संक्रमण विशेषता "ऊंचाई" और "पृष्ठभूमि" विशेषता को अच्छी तरह से एनिमेट करता है

http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

इस लिंक के स्रोत कोड के साथ एक महान ट्यूटोरियल है, जिसे आप खेल सकते हैं, दिखाते हैं कि हेडर के साथ-साथ हीडर में ही तत्व कैसे बना सकते हैं।

ट्विटर स्क्रॉल परेशानी के आधार पर ( http://ejohn.org/blog/learning-from-twitter/ )

यहां मेरा समाधान है, जेएस स्क्रॉल ईवेंट थ्रॉटलिंग (मोबाइल उपकरणों के लिए उपयोगी)

जे एस:

 $(function() { var $document, didScroll, offset; offset = $('.menu').position().top; $document = $(document); didScroll = false; $(window).on('scroll touchmove', function() { return didScroll = true; }); return setInterval(function() { if (didScroll) { $('.menu').toggleClass('fixed', $document.scrollTop() > offset); return didScroll = false; } }, 250); }); 

सीएसएस:

 .menu { background: pink; top: 5px; } .fixed { width: 100%; position: fixed; top: 0; } 

HTML:

 <div class="menu">MENU FIXED ON TOP</div> 

http://codepen.io/anon/pen/BgqHw

मैंने जजिपिन के उत्तर का एक उन्नत संस्करण किया था (और मैं ऊँचाई के बजाय पैडिंग शीर्ष को एनिमेट कर रहा हूं, लेकिन फिर भी आप इस बिंदु को प्राप्त करते हैं

  /** * ResizeHeaderOnScroll * * @constructor */ var ResizeHeaderOnScroll = function() { this.protocol = window.location.protocol; this.domain = window.location.host; }; ResizeHeaderOnScroll.prototype.init = function() { if($(document).scrollTop() > 0) { $('header').data('size','big'); } else { $('header').data('size','small'); } ResizeHeaderOnScroll.prototype.checkScrolling(); $(window).scroll(function(){ ResizeHeaderOnScroll.prototype.checkScrolling(); }); }; ResizeHeaderOnScroll.prototype.checkScrolling = function() { if($(document).scrollTop() > 0) { if($('header').data('size') == 'big') { $('header').data('size','small'); $('header').stop().animate({ paddingTop:'1em', paddingBottom:'1em' },200); } } else { if($('header').data('size') == 'small') { $('header').data('size','big'); $('header').stop().animate({ paddingTop:'3em' },200); } } } $(document).ready(function(){ var resizeHeaderOnScroll = new ResizeHeaderOnScroll(); resizeHeaderOnScroll.init() })