जब आप 991 से अधिक चौड़ी स्क्रीन पर स्क्रॉल करते हैं, तो मैं एक डिव फॉलो करना चाहता हूं। छोटे स्क्रीन साइज पर मुझे डिव फिक्स चाहिए। और मैं चाहता हूं कि हर बार जब कोई पेज लोड या आकार बदलता है तो जावास्क्रिप्ट कोड रीफ्रेश करें।

यहां मेरा कोड (यह सूखा नहीं है ...)

मेरी समस्या यह है कि जब मैं विंडो का आकार बदलता हूं (डेस्कटॉप स्क्रीन -> मोबाइल स्क्रीन -> डेस्कटॉप स्क्रीन ...): 1 - मोबाइल स्क्रीन पर मैं पृष्ठ 2 के नीचे नहीं जा सकता - डेस्कटॉप स्क्रीन पर मुझे समस्या होती है जब मैं पृष्ठ स्क्रॉल करता हूँ

  //when the page is load and the window resize detect if it's a smallscreen
  var smallscreen = true;
  $(window).on("resize load", function() {
    if ($(window).width() > 991) {
      smallscreen = false;
    }
    else {
      smallscreen = true;
    };

    //if it's not a small screen activate the scrolling
    if (smallscreen == false) {
      $.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: 180
            });
          };
        });
      };
      $('#checkout_validation').followTo(400);
    }
    else {
      $.fn.followTo = function ( pos ) {
        var $this = this,
            $window = $(window);

        $window.on("resize scroll load", function(e){
          if ($window.scrollTop() > pos) {
            $this.css({
                position: 'initial',
                width: '100%',
                top: 0
            });
          }
          else {
            $this.css({
                position: 'initial',
                width: '100%',
                top: 0
            });
          };
        });
      };
      $('#checkout_validation').followTo(0);
    };
  });
1
Blueone 14 अगस्त 2017, 16:33
1
आप छोटे स्क्रीन के लिए कोड हटा सकते हैं और इसे ठीक करने के लिए बस सीएसएस का उपयोग कर सकते हैं। और डेस्कटॉप के लिए $.fn.followTo फ़ंक्शन को $(window).on("resize load" से हटा दें। और इसी तरह अन्य कोड भी स्थानांतरित करें। यह आपको स्पष्ट विचार देगा कि क्या काम नहीं कर रहा है।
 – 
iMatoria
14 अगस्त 2017, 16:50
आपके उत्तर के लिए धन्यवाद। अगर मैं छोटे स्क्रीन कोड को हटा देता हूं तो अगर मैं विंडो का आकार बदलता हूं तो div हमेशा स्क्रॉल करेगा।
 – 
Blueone
14 अगस्त 2017, 17:40
1
यही आपको CSS का उपयोग करके प्रबंधित करना है। आप छोटी स्क्रीन के मामले में और सीएसएस का उपयोग करने के मामले में एक कक्षा जोड़ सकते हैं। मोबाइल फर्स्ट कोड/एचटीएमएल को लागू करने का यह बहुत ही सामान्य तरीका है।
 – 
iMatoria
14 अगस्त 2017, 19:07
धन्यवाद @iMatoria, मैंने एक कामकाजी कोड को अंतिम रूप दिया। मेरा जवाब नीचे देखें।
 – 
Blueone
16 अगस्त 2017, 01:06

1 उत्तर

सबसे बढ़िया उत्तर

यहां मेरा कामकाजी कोड है। धन्यवाद @iMatoria इसे सुखाने के लिए।

//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;

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

    $window.on("resize scroll", function(e) {
        function positionByScreen(positionForBiggerScreen, topOffsetForBiggerScreen) {
            if (smallscreen == false) {
                //alert('bigcreen scroll end');
                $this.css({
                    position: positionForBiggerScreen,
                    top: topOffsetForBiggerScreen
                });
            } else {
                //alert('smallscreen no scroll end ');
                $this.css({
                    position: 'inherit',
                    top: 0
                });
            }
        }

        if ($window.scrollTop() > pos) {
            positionByScreen("absolute", pos);
        } else {
            positionByScreen("fixed", 180);
        };
    });
};

$(window).on("resize load", function() {
    smallscreen = !($(window).width() > 991);

    //if it's not a small screen activate the scrolling
    $('#checkout_validation').followTo(smallscreen ? 0 : 400);

    //var d = document.getElementById("checkout_validation");
    //d.className += " otherclass";
});
0
Blueone 18 अगस्त 2017, 02:03
मैंने अभी कोड में एक समस्या का पता लगाया है। जब मैं पहली बार मोबाइल पर पेज लोड करता हूं तो तत्व पैरामीटर (स्थिति: निश्चित; शीर्ष: 180 पीएक्स;) होता है और मुझे सही पैरामीटर लागू करने के लिए आकार बदलने या स्क्रॉल करने की आवश्यकता होती है। मैंने लाइन 5 पर "लोड" जोड़ने की कोशिश की लेकिन यह काम नहीं कर रहा है। ($window.on("resize scroll", function(e))
 – 
Blueone
24 अगस्त 2017, 00:08