एक निश्चित बिंदु पर स्थिर स्थिति स्क्रॉल रोकना?

94

मेरे पास एक तत्व है जो स्थिति है: निश्चित है और इसलिए पृष्ठ के साथ स्क्रॉल करता है कि मैं इसे कैसे करना चाहता हूं। जब उपयोगकर्ता स्क्रॉल करता है तो मैं चाहता हूं कि तत्व एक निश्चित बिंदु पर स्क्रॉल करना बंद कर दे, जब यह पृष्ठ के शीर्ष से 250px तक हो, तो क्या यह संभव है? कोई मदद या सलाह उपयोगी होगा धन्यवाद!

मुझे लग रहा था कि ऐसा करने के लिए मुझे jquery का उपयोग करने की आवश्यकता होगी। मैंने स्क्रॉलिंग या स्थान प्राप्त करने की कोशिश की जहां उपयोगकर्ता है, लेकिन वास्तव में भ्रमित हो गया है, क्या कोई jquery समाधान है?

jquery  css  positioning 
— लुईस मैककामिस्की
स्रोत
1
जहाँ तक मुझे पता है, केवल एक जावास्क्रिप्ट-आधारित समाधान वही करेगा जो आप चाहते हैं। कोई शुद्ध सीएसएस समाधान नहीं है जो ऐसा करता है।
— cdeszaq

जवाबों:

124

यहाँ एक त्वरित jQuery प्लगइन है जो मैंने लिखा था कि आप जो कर सकते हैं वह आवश्यक है:

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

काम का उदाहरण देखें →

— mVChr
स्रोत
यह आशाजनक लगता है कि हाँ, यह मैंने कुछ बिंदुओं पर स्थिति को बदलने के बारे में सोचा था, il आपको पता है कि मुझे धन्यवाद कैसे मिलता है!
— लुईस मैककॉस्की
1
हाय हाँ, थैंक्यू अलॉट कुछ ट्वीस्ट के साथ जो मैं चाहता था और यह अब पूरी तरह से फिर से धन्यवाद काम कर रहा है।
— लुईस मैककामिस्की
3
$('window')उद्धरणों में नहीं होना चाहिए। लेकिन इसके लिए धन्यवाद, यह बहुत मददगार था।
— jeff
137

क्या आपका मतलब इस तरह से है?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

कोड स्निपेट दिखाएं

— जेम्स मॉन्टगैन
स्रोत
महान, बहुत बहुत धन्यवाद! हालांकि मेरा कार्य "हमेशा ऊपर वाले" बटन को बनाना था जो हमेशा पाद लेख से ऊपर होगा, मैंने इस कोड को थोड़ा संशोधित किया। मेरा संस्करण यहां देखें (js कॉफी): jsfiddle.net/9vnwx3fa/2
— Alb
@ जेम्स मोंटेगेन - यदि मुझे निर्धारित तत्व चिपचिपा नीचे चाहिए तो इस कोड को उलटने के लिए क्या उपाय होगा: 0; पृष्ठ के निचले भाग में पहुँचने से पहले स्क्रॉल पर और फिर 250px को रोक दें?
— BoneStarr
1
@BoneStarr यह थोड़ा और अधिक जटिल है। आपको पृष्ठ और व्यूपोर्ट की ऊंचाई के साथ वर्तमान स्क्रॉलटॉप की तुलना करने की आवश्यकता होगी। तो आप बस ऊपर bottomऔर इसी गणना मूल्य (ऑफसेट द्वारा 250) को छोड़कर, एक ही कोड का उपयोग करेंगे ।
— जेम्स मोंटेगॉन
@JamesMontagne - कोई भी मौका जो आप इस पहेली पर विस्तार से बता सकते हैं? वास्तव में इसकी सराहना करेंगे क्योंकि मैं इसके साथ फंस गया हूं। jsfiddle.net/Hf5wH/137
— BoneStarr
1
@bonestarr इससे काफी जटिल है। आपको इसे कोड की कई लाइनों तक विस्तारित करना चाहिए या इसे समझना वास्तव में कठिन है। jsfiddle.net/Hf5wH/139
— जेम्स मॉन्टेन
19

यहाँ एक पूर्ण jquery प्लगइन है जो इस समस्या को हल करता है:

https://github.com/bigspotteddog/ScrollToFixed

इस प्लगइन का वर्णन इस प्रकार है:

इस प्लगइन का उपयोग पेज के शीर्ष पर तत्वों को ठीक करने के लिए किया जाता है, अगर तत्व को लंबवत रूप से स्क्रॉल किया जाएगा; हालाँकि, यह तत्व को क्षैतिज स्क्रॉल के साथ बाएँ या दाएँ स्थानांतरित करने की अनुमति देता है।

एक विकल्प मार्जिन को देखते हुए, ऊर्ध्वाधर स्क्रॉल लक्ष्य की स्थिति में पहुंच जाने के बाद, तत्व ऊपर की ओर बढ़ना बंद कर देगा; लेकिन, तत्व अभी भी क्षैतिज रूप से आगे बढ़ेगा क्योंकि पृष्ठ को बाएं या दाएं स्क्रॉल किया जाता है। एक बार जब पृष्ठ को लक्ष्य स्थिति में वापस स्क्रॉल कर दिया जाता है, तो तत्व पृष्ठ पर अपनी मूल स्थिति में पुनर्स्थापित हो जाएगा।

इस प्लगइन का फ़ायरफ़ॉक्स 3/4, Google Chrome 10/11, Safari 5 और Internet Explorer 8/9 में परीक्षण किया गया है।

आपके विशेष मामले के लिए उपयोग:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});
— bigspotteddog
स्रोत
1
Thankyou हाँ यह वास्तव में उपयोगी दिखता है, मैंने पिछले उत्तर का उपयोग किया क्योंकि यह परियोजना कुछ महीने पहले थी, लेकिन मैं निश्चित रूप से भविष्य की परियोजनाओं के लिए इसे ध्यान में
— रखूंगा
6

आप जेम्स मॉन्टेन ने अपने जवाब में अपने कोड के साथ क्या किया, लेकिन वह इसे क्रोम में झिलमिलाहट (वी 19 में परीक्षण) कर देगा।

आप इसे ठीक कर सकते हैं यदि आप "शीर्ष" के बजाय "मार्जिन-टॉप" डालते हैं। वास्तव में पता नहीं क्यों यह मार्जिन थियो के साथ काम करता है।

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

— जुरे रावली
स्रोत
यह पाठ के नीचे निश्चित तत्वों के लिए बहुत अच्छा काम करता है, मुझे छोटे स्क्रीन डिस्प्ले के साथ एक गंभीर समस्या हो रही है, और मेरे निर्धारित स्क्रॉल तत्व 1024x768 जैसे छोटे क्षेत्रों पर ब्राउज़र टॉप तक चलते हैं। इससे वह समस्या हल हो गई।
— यहोशू
4

एक संभव सीएसएस केवल समाधान के साथ प्राप्त किया जा सकता हैposition: sticky;

ब्राउज़र समर्थन वास्तव में बहुत अच्छा है: https://caniuse.com/#search=position%3A%20sticky

यहाँ एक उदाहरण है: https://jsfiddle.net/0vcoa43L/7/

— JiiB
स्रोत
2
दुर्भाग्य से IE11 के लिए लागू नहीं है
— अलेजांद्रो
2

मेरा समाधान 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
— user3288218
स्रोत
2

एक परियोजना में, मेरे पास वास्तव में पृष्ठ लोड पर स्क्रीन के निचले भाग में तय की गई हेडिंग है (यह एक ड्राइंग ऐप है इसलिए हेडिंग व्यापक व्यूपोर्ट पर कैनवास तत्व को अधिकतम स्थान देने के लिए सबसे नीचे है)।

मुझे शीर्ष पर 'पूर्ण' बनने के लिए हेडिंग की आवश्यकता होती है, जब वह स्क्रॉल पर पाद तक पहुँचता है, क्योंकि मैं पाद लेख पर शीर्षक नहीं चाहता (शीर्ष रंग पाद लेख पृष्ठभूमि रंग के समान है)।

मैंने यहां सबसे पुरानी प्रतिक्रिया ली (गियर मिलो द्वारा संपादित) और उस कोड स्निपेट ने मेरे उपयोग-मामले के लिए काम किया। आसपास खेलने के साथ मुझे यह काम मिला। एक बार जब यह पाद लेख तक पहुँचता है, तो फ़ेडिंग फ़ेडर के ऊपर स्थिर रूप से बैठा होता है।

बस मैंने सोचा कि मैं अपना उपयोग-मामला साझा करूँगा और यह कैसे काम करेगा, और धन्यवाद कहेंगे! ऐप: http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }
— जोसेफ बाज़
स्रोत
1

मैंने इस बारे में एक ब्लॉग पोस्ट लिखी जिसमें इस समारोह को दिखाया गया है:

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};
— नाथन मैकगिनस
स्रोत
0

Mootools फ्रेमवर्क का उपयोग कर एक समाधान।

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. उस तत्व की स्थिति (x & y) प्राप्त करें जहां आप $ ('myElement') का उपयोग करके स्क्रॉल को रोकना चाहते हैं।

    $ ( 'MyElement')। GetPosition ()। Y

  2. स्क्रॉल उपयोग के एक एनीमेशन प्रकार के लिए:

    नया Fx.Scroll ('स्क्रॉलडिव', {ऑफसेट: {x: 24, y: 432}})। टॉप ();

  3. स्क्रॉल को तुरंत सेट करने के लिए तुरंत उपयोग करें:

    new Fx.Scroll (myElement) .set (x, y);

उम्मीद है की यह मदद करेगा !! : डी

— Zohaib
स्रोत
0

मुझे यह समाधान पसंद आया 

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

मेरी समस्या यह थी कि मुझे एडोब सरस्वती में एक स्थिति सापेक्ष कंटेनर से निपटना था।

मेरा समाधान:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
— लेउ
स्रोत
0

बस इंप्रूव्ड mVChr कोड

$(".sidebar").css('position', 'fixed')

    var windw = this;

    $.fn.followTo = function(pos) {
        var $this = this,
                $window = $(windw);

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);
— sreeraj
स्रोत
स्टोर करने $(this)और $(window)वेरिएबल्स में आने का कारण आपको केवल $this.height()इतना करना है। एक शीर्ष स्थिति सेट करने के बजाय यह बेहतर नहीं होगा यदि प्लगइन मूल शीर्ष मान संग्रहीत करता है और निश्चित चौड़ाई सेट करते समय इसे वापस कर दिया जाता है? इसके अलावा, आपका क्या मतलब है Just improvised mVChr code?
— चक्रवात
0

मैंने @ mVchr के उत्तर को अनुकूलित किया और इसे चिपचिपे विज्ञापन स्थिति के लिए उपयोग करने के लिए उल्टा कर दिया: यदि आपको शीर्ष लेख की स्क्रीन बंद होने तक इसे पूरी तरह से पोस्ट करने (स्क्रॉल करने) की आवश्यकता है, लेकिन इसके बाद इसे ठीक करने / स्क्रीन पर दिखाई देने की आवश्यकता है:

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

सीएसएस:

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}
— cbmtrx
स्रोत
0

मुझे @james उत्तर बहुत पसंद था, लेकिन मैं इसके उलट की तलाश कर रहा था, यानी पाद लेख से ठीक पहले निश्चित स्थिति को बंद कर दूं, यहाँ पर मैं आया हूँ

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

तो अब निश्चित तत्व पाद से ठीक पहले बंद हो जाएगा। और इसके साथ ओवरलैप नहीं होगा।

— mshahbazm
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.