নির্দিষ্ট পয়েন্টে স্থির অবস্থান স্ক্রোলিং থামানো?

96

আমার অবস্থান রয়েছে এমন একটি উপাদান রয়েছে: স্থির এবং তাই আমি কীভাবে এটি চাই তা পৃষ্ঠা সহ স্ক্রোল করে। যখন ব্যবহারকারী স্ক্রল আপ করে আমি উপাদানটি নির্দিষ্ট পয়েন্টে স্ক্রোলিং বন্ধ করে দিতে চাই, পৃষ্ঠার শীর্ষ থেকে 250 পিক্সেল থাকাকালীন এটি কি সম্ভব? কোনও সহায়তা বা পরামর্শ সহায়ক হবে ধন্যবাদ!

আমার একটা অনুভূতি ছিল যে এটি করার জন্য আমার jquery ব্যবহার করা প্রয়োজন। আমি যেখানে ব্যবহারকারী কিন্তু সত্যিই বিভ্রান্ত হয়ে পড়েছি সেখানে স্ক্রোলিং বা অবস্থান পাওয়ার চেষ্টা করেছি, কোনও জেকোরি সমাধান আছে কি?

jquery  css  positioning 
— লুই ম্যাককমিস্কি
সূত্র
4
আমি যতদূর জানি, কেবলমাত্র একটি জাভাস্ক্রিপ্ট-ভিত্তিক সমাধান যা চাইবে তা করবে। এমন কোনও খাঁটি সিএসএস সমাধান নেই।
— সিডিজাক

উত্তর:

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);

কাজের উদাহরণ দেখুন →

— এমভিসিএইচআর
সূত্র
এটি আশাব্যঞ্জক হ্যাঁ মনে হচ্ছে এটি নির্দিষ্ট পয়েন্টগুলিতে অবস্থান পরিবর্তন করার জন্য আমি কী ভেবেছিলাম, আমি আপনাকে কীভাবে ধন্যবাদ জানাতে পারি তা জানাতে!
— লুই ম্যাককমিসকি
4
হাই হ্যাঁ থ্যাঙ্কিও আমি যা চেয়েছিলাম ঠিক তেমন কয়েকটি টুইটের সাথে এটিকে অনেক কিছু দিয়েছি এবং এটি এখন আবার পুরোপুরি ধন্যবাদ দিয়ে কাজ করছে।
— লুই ম্যাককিস্কি
4
$('window')উক্তি হওয়া উচিত নয়। তবে এর জন্য ধন্যবাদ, এটি খুব সহায়ক ছিল।
— জেফ
138

আপনি কি এর মতো বোঝাতে চান?

http://jsfiddle.net/b43hj/

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

কোড স্নিপেট দেখান

— জেমস মন্টাগেন
সূত্র
দুর্দান্ত, আপনাকে অনেক ধন্যবাদ! যদিও আমার কাজটি ছিল "টপ টু" বোতামটি তৈরি করা যা সর্বদা পাদলেখের উপরে থাকবে, আমি এই কোডটি কিছুটা পরিবর্তন করেছি। আমার সংস্করণটি এখানে দেখুন ( জেএস
— Alb
@ জেমস মন্টেগেন - যদি আমি স্থির উপাদানটিকে চটচটে তলটি চাইতাম তবে এই কোডটি উল্টানোর সমাধান কী হবে: 0; পৃষ্ঠার নীচে পৌঁছানোর আগে স্ক্রোলে এবং তারপরে 250px বন্ধ করুন?
— বোনস্টার স্টার
4
@ বোনস্টার এটি কিছুটা জটিল। আপনার পৃষ্ঠার উচ্চতা এবং ভিউপোর্টের সাথে বর্তমান স্ক্রোলটপটি তুলনা করতে হবে। তারপরে আপনি কেবলমাত্র উপরে একই কোডটি ব্যবহার করবেন bottomএবং এই গণনা করা মানটি (250 দ্বারা অফসেট) সর্বাধিক।
— জেমস মন্টেগেন
@ জেমস মন্টাগনে - আপনি এই ফিজলটি সম্পর্কে বিস্তারিত ব্যাখ্যা করতে পারেন এমন কোনও সুযোগ? আমি এটির সাথে আটকে থাকায় সত্যিই এটির প্রশংসা করব। jsfiddle.net/Hf5wH/137
— বোনস্টার
4
@ ব্রোনস্টায়ার এটির চেয়ে যথেষ্ট জটিল। আপনার এটি কোডের একাধিক লাইনে প্রসারিত করা উচিত বা এটি বোঝা সত্যিই শক্ত। jsfiddle.net/Hf5wH/139
— জেমস মন্টাগন
20

এখানে একটি সম্পূর্ণ jquery প্লাগইন যা এই সমস্যাটি সমাধান করে:

https://github.com/bigspotteddog/ScrolToFixed

এই প্লাগইনটির বর্ণনা নিম্নরূপ:

এই প্লাগইনটি পৃষ্ঠার শীর্ষে উপাদানগুলি ঠিক করতে ব্যবহার করা হয়, যদি উপাদানটি উল্লম্বভাবে দেখতে বাইরে স্ক্রোল করা থাকে; যাইহোক, এটি উপাদানটিকে অনুভূমিক স্ক্রোল দিয়ে বাম বা ডানদিকে চলতে দেয়।

একটি বিকল্প মার্জিনটপ দেওয়া হয়েছে, উলম্ব স্ক্রোলটি লক্ষ্য অবস্থানে পৌঁছানোর পরে উপাদানটি উল্লম্বভাবে উপরের দিকে অগ্রসর হওয়া বন্ধ করবে; তবে পৃষ্ঠাটি বাম বা ডানদিকে স্ক্রোল করা হওয়ায় উপাদানটি অনুভূমিকভাবে সরবে। একবার পৃষ্ঠার লক্ষ্য স্থির পিছনে আবার স্ক্রোল করা হয়ে গেলে উপাদানটি পৃষ্ঠার মূল অবস্থানে পুনরুদ্ধার করা হবে।

এই প্লাগইনটি ফায়ারফক্স 3/4, গুগল ক্রোম 10/11, সাফারি 5, এবং ইন্টারনেট এক্সপ্লোরার 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 });
});
— বিগস্পটেডডগ
সূত্র
4
থানকিউ হ্যাঁ এটি সত্যিই দরকারী বলে মনে হচ্ছে, আমি পূর্ববর্তী উত্তরটি ব্যবহার করেছি কারণ এই প্রকল্পটি কয়েকমাস আগে হয়েছিল তবে আমি অবশ্যই ভবিষ্যতের প্রকল্পগুলির জন্য এটি মনে
— রাখব
6

জেমস মন্টাগন তার উত্তরে তার কোডটি দিয়ে যা করেছিলেন তা আপনি করতে পারেন তবে এটি ক্রোমে ঝাঁকুনিতে পরিণত করবে (ভি 19-তে পরীক্ষিত)।

আপনি "শীর্ষ" এর পরিবর্তে "মার্জিন-টপ" রাখলে আপনি এটি ঠিক করতে পারেন। কেন এটি মার্জিনের সাথে কাজ করে তা সত্যিই জানেন না।

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

http://jsbin.com/idacel

— জুরে রাভলিć
সূত্র
এটি পাঠ্যের নীচে স্থির উপাদানগুলির জন্যও দুর্দান্ত কাজ করে, ছোট স্ক্রিনের প্রদর্শনগুলির সাথে আমার একটি গুরুতর সমস্যা হয়েছে এবং আমার স্থির স্ক্রোল উপাদানগুলি 1024x768 এর মতো ছোট অঞ্চলে ব্রাউজারের শীর্ষে চালানো হচ্ছে। এটি এই সমস্যার সমাধান করেছে।
— জোশুয়া
5

কেবলমাত্র একটি সম্ভাব্য সিএসএসই সলিউশনটি পাওয়া যায়position: sticky;

ব্রাউজার সমর্থনটি আসলেই বেশ ভাল: https://caniuse.com/#search=position%3A%20 স্টিকি

এখানে একটি উদাহরণ: https://jsfiddle.net/0vcoa43L/7/

— জিআইবি
সূত্র
4
দুর্ভাগ্যবশত আই 11 এর জন্য প্রযোজ্য নয়
— আলেজান্দ্রো
2

আমার সমাধান 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
— ব্যবহারকারী 3288218
সূত্র
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

মটুলস ফ্রেমওয়ার্ক ব্যবহার করে একটি সমাধান।

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

  1. আপনি যে এলিমেন্টটি $ ('myElement') ব্যবহার করে স্ক্রোলটি থামাতে চান সেখানে অবস্থানের (x এবং y) পান P পজিশন ()। X

    '(' মাই এলিমেন্ট ') get গেটপজিশন () y

  2. অ্যানিমেশন ধরণের স্ক্রোল ব্যবহারের জন্য:

    নতুন এফএক্স.স্রোকল ('স্ক্রোলডিভআইড', {অফসেট: {x: 24, y: 432}})। টপ ();

  3. শুধু স্ক্রোল সেট করতে অবিলম্বে ব্যবহার করুন:

    নতুন Fx.Scrol (myElement) .set (x, y);

আশাকরি এটা সাহায্য করবে !! : ডি

— জোহাইব
সূত্র
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

সবেমাত্র এমভিসিএইচআর কোড impro

$(".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);
— শ্রীরাজ
সূত্র
ভেরিয়েবলগুলিকে সংরক্ষণ $(this)এবং রাখার কারণ $(window)তাই আপনাকে কেবলমাত্র করতে হবে $this.height()এবং আরও অনেক কিছু। কোনও শীর্ষ অবস্থান নির্ধারণের পরিবর্তে প্লাগইন যদি মূল শীর্ষ মানটি সংরক্ষণ করে এবং কোনও নির্দিষ্ট প্রস্থ নির্ধারণ করার সময় এটিতে ফিরে আসে তবে ভাল হয় না? এছাড়াও, আপনি কি বলতে চাইছেন Just improvised mVChr code?
— সাইক্লোনকোড
0

আমি @ এমভিসিআর এর উত্তরটি অভিযোজিত করেছি এবং এটি স্টিকি বিজ্ঞাপনের পজিশনিংয়ের জন্য ব্যবহার করতে উল্টিয়ে দিয়েছি: হেডার জাঙ্কটি স্ক্রিনটি বন্ধ না হওয়া পর্যন্ত আপনার যদি একেবারে পজিশনিং (স্ক্রোলিং) প্রয়োজন হয় তবে তারপরে স্ক্রিনে স্থির / দৃশ্যমান থাকা দরকার:

$.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

আমি @ জেমস উত্তরটি পছন্দ করেছিলাম তবে আমি এর বিপরীতটি খুঁজছি অর্থাৎ পাদচরণের ঠিক আগে অবস্থান ঠিক করুন, আমি এখানে এসেছি

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));
    }

সুতরাং এখন স্থির উপাদান পাদলেখের ঠিক আগে থামবে। এবং এটি দিয়ে ওভারল্যাপ হবে না।

— মিশাহবাজম
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.