স্ক্রোল হয়ে যাওয়ার পরে আমি কীভাবে স্ক্রিনের শীর্ষে একটি ডিভি স্টিক তৈরি করতে পারি?

Question

আমি একটি ডিভি তৈরি করতে চাই, এটি সামগ্রীর ব্লকের নীচে অবস্থিত তবে একবার পৃষ্ঠার শীর্ষ সীমানার সাথে যোগাযোগ করার জন্য পর্যাপ্তভাবে স্ক্রোল করা হয়ে গেলে স্থির হয়ে যায় এবং পৃষ্ঠাটির সাথে স্ক্রল হয় ls

Comments

জুন ২০১৪ পর্যন্ত, স্টিকি-কিট জিকিউরি প্লাগইন অন্যতম সহজ বিকল্প, এন্ট্রি এবং প্রচুর বৈশিষ্ট্যগুলির জন্য অত্যন্ত কম বাধা সরবরাহ করে। আপনি যদি দ্রুত মাটি থেকে নামার সহজ উপায় সন্ধান করেন তবে শুরু করার দুর্দান্ত জায়গা।

— ব্যবহারকারী 456584

সিএসএস ট্রিকস: css-tricks.com/scrol-fix-context

— Ciro Santilli 法轮功 冠状 病 六四 事件 法轮功

সিএসএস যুক্ত position: sticky; top:0;করা বেশিরভাগ ব্রাউজারগুলিতে জানুয়ারী 2017 এ কাজ করে

— কলিন 'হার্ট

পবিত্র বাজে কথা, position: sticky;জিনিসটি যাদুকর।

— tscizzle

Answer 1

আপনার উপাদানটিকে স্থির হিসাবে স্থাপন করে আপনি কেবল সিএসএস ব্যবহার করতে পারেন :

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

সম্পাদনা: আপনার অবস্থানের নিখুঁত সাথে উপাদান থাকা উচিত, একবার যখন স্ক্রোল অফসেট উপাদানটিতে পৌঁছায়, এটি স্থির করে নেওয়া উচিত এবং শীর্ষ অবস্থানটি শূন্যে সেট করা উচিত।

আপনি স্ক্রোলটপ ফাংশন সহ নথির শীর্ষ স্ক্রোল অফসেট সনাক্ত করতে পারেন :

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

যখন স্ক্রোল অফসেট 200 এ পৌঁছেছে তখন উপাদানটি ব্রাউজার উইন্ডোটির শীর্ষে আটকে থাকবে , কারণ এটি স্থির হিসাবে রাখা হয়েছে।

Comments

যে আমি যাচ্ছি তা অর্জন করে না। পৃষ্ঠার শীর্ষের নীচে 200px এ উপাদানটি শুরু করতে চাই (অন্য সামগ্রীর জন্য জায়গা দেওয়ার জন্য) এবং তারপরে ব্যবহারকারী একবার স্ক্রোল করে শীর্ষে স্থির হয়ে উঠবে।

— ইভানার

আপনার সম্পাদনাটি এখন সত্যিই প্রশ্নের চাহিদা পূরণ করে তবে পৃষ্ঠাটি আবার শীর্ষে ফিরে স্ক্রোল করলে আপনার এখনও সমস্যা আছে। আপনি উপাদানটি স্ক্রোলটপ এটিকে অন্য কোথাও সঞ্চয় করার পরে দেখতে পেলেন এবং পৃষ্ঠাটি যখন আবার সেই অবস্থানের উপরের দিকে চলে যায় (যখন উপরের দিকে স্ক্রোল করা হয়) তখন সিএসএসকে ডিফল্টরূপে পরিবর্তন করে ... সম্ভবত টোগলক্লাসের সাহায্যে এটি করা আরও ভাল ...

— স্যান্ডার

এটি বেশ কি তখন যখন হয় তবে যখন উইন্ডোটি উপরে ফিরে স্ক্রোল করা হয় তখন আমাকে স্থির অবস্থানটি সরিয়ে ফেলতে হয়েছিল। if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }

— ডেরিক পেটজল্ড

@ ডেরিকপেটজল্ড আমি উত্তরে এটি উত্তরে রেখেছি, বেশ গুরুত্বপূর্ণ জিনিস :)

— মারিওডিএস

আপনি যে new exampleলিঙ্কটি দিয়েছেন তা এতটাই পরিষ্কার এবং পরিষ্কার যে আমি এটি দেখতেও পাচ্ছি না! -_-

— সোহাইবি

Answer 2

আপনি এই উদাহরণটি গুগল কোডের ইস্যু পৃষ্ঠাতে এবং (সম্প্রতি সম্প্রতি) স্ট্যাক ওভারফ্লো এর সম্পাদনা পৃষ্ঠায় দেখেছেন ।

আপনি যখন ব্যাক আপ করবেন তখন সিএমএসের উত্তর অবস্থানটি ফিরিয়ে দেয় না। স্ট্যাক ওভারফ্লো থেকে নির্লজ্জভাবে চুরি হওয়া কোডটি এখানে:

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এটি ক্রোম, ফায়ারফক্স এবং সাফারিতে সমর্থিত। এইচটিএমএল 5 রকস এবং ডেমো এবং মোজিলা ডক্সের নিবন্ধটি দেখুন ।

Comments

কোনও কারণে, {স্ক্রোল: মিথ্যা me আমাকে সমস্যাগুলি দিচ্ছিল (jQuery 1.6.2)। এটি ছাড়া কাজ মনে হচ্ছে। লিঙ্কযুক্ত ডেমো থেকে কাঁটাচামচ । কোন ধারণা যদি এটি একটি উদ্দেশ্য পরিবেশন করে?

— এডি

আমি এ নিয়ে প্রচুর সমস্যায় পড়ছি, আমার জীবনের জন্য আমি প্রতিলিপি করতে পারি না, এমনকি আমি লাইভ ডেমোটির প্রতিলিপি তৈরির চেষ্টা করেছি এবং এটি কাজ করছে না। যে কেউ টিউটোরিয়ালের সাথে লিঙ্ক করতে পারে যা ধাপে ধাপে নির্দেশাবলী সরবরাহ করে?

— ট্রেভর ডুপ

এটি ঠিকঠাক কাজ করার মতো মনে হয়, যখন আমি ডেমো হিসাবে (1.3.2) jQuery এর একই সংস্করণ ব্যবহার করি। কিছু সময়ে offsetঅবশ্যই কোনও জিনিস ইনপুট api.jquery.com/offset হিসাবে গ্রহণ করা বন্ধ করে দিয়েছে । @ এডি আপনার পরিবর্তনটি বর্তমান জিকুয়েরির সাথে নিরাপদ থাকা উচিত।

— গ্রামীণ

কোন কারণে আপনি প্রতিস্থাপন না পারে var d = $("#scroller-anchor").offset().top;সঙ্গে var d = $("#sidebar").offset().top;এবং খালি scroller-নোঙ্গর এর div সব একসাথে পরিত্রাণ পেতে? আমি যা বলছি তা এখানে আমার কাঁটাচামচ প্রদর্শন করছে।

— মাইক ডেক

@ মাইকডেক আমি সন্দেহ করি যে যদি মার্জিন বা প্যাডিং থাকে তবে আপনি ধারকটির তুলনায় স্ক্রোলারটি কোথায় অবস্থিত তা নিয়ন্ত্রণ করতে সক্ষম হতে চান।

— জোশ লি

Answer 3

জানুয়ারী 2017 এবং ক্রোম 56 এর প্রকাশ হিসাবে, সাধারণ ব্যবহারের বেশিরভাগ ব্রাউজারগুলি position: stickyCSS এ সম্পত্তি সমর্থন করে।

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

ফায়ারফক্স এবং ক্রোমে আমার জন্য কৌশলটি করে।

সাফারিতে আপনাকে এখনও ব্যবহার করতে হবে position: -webkit-sticky।

পলিফিলগুলি ইন্টারনেট এক্সপ্লোরার এবং এজের জন্য উপলব্ধ; https://github.com/wilddeer/stickyfill একটি ভাল বলে মনে হচ্ছে।

Comments

এটি আজ সাধারণ ব্যবহারে বেশিরভাগ ব্রাউজারগুলিতে সমর্থিত। Caniuse.com/#feat=css-sticky দ্বিতীয়ত, আমি অনেকটা এমন একটি সমাধান পছন্দ করি যা কাস্টম জাভাস্ক্রিপ্টের প্রয়োজন হয় এমন সংস্করণে 2 লাইন কোডে সিদ্ধ করা যায়। এবং এটি ভবিষ্যতের প্রমাণও। আপনি যদি ব্রাউজারের সামঞ্জস্য নিয়ে চিন্তিত হন তবে একটি পলিফিল ব্যবহার করুন।

— কলিন 'হার্ট

এর চেয়ে সহজ আর হতে পারে না :)

— ২

আমি এই মন্তব্যে যুক্ত করতে চাই যে আমরা জেড-ইনডেক্স করতে পারি: 99999;, কারণ এটি শীর্ষে গেলে না হয়, অন্য সামগ্রীটি প্রথমে রেন্ডার হবে। তবে এটি গ্রহণযোগ্য সমাধান হওয়া উচিত।

— দয়ানআর .91

এটিকে কেবল আইডি = "জিনিস_ টো_স্টিক" দিয়ে একটি ডিভের মধ্যে আবদ্ধ করুন

— আন্তন

সহজ এবং সহজ সমাধান। এবং অবশ্যই আমার ক্ষেত্রে অন্যান্য সমাধানের চেয়ে ভাল কাজ করে।

— fsevenm

Answer 4

আপনার মতোই আমারও সমস্যা ছিল এবং এটির যত্ন নেওয়ার জন্য jQuery প্লাগইন তৈরি শেষ করেছি। এটি এখানে লোকেদের তালিকাভুক্ত সমস্ত সমস্যার সমাধান করে, এর সাথে এটি বেশ কয়েকটি alচ্ছিক বৈশিষ্ট্যও যুক্ত করে।

বিকল্প

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

Comments

হে! ধন্যবাদ! এটি একটি দুর্দান্ত সমাধান, এবং ভাগ করে নেওয়ার জন্য ধন্যবাদ, অবশ্যই এটি আমার অনেক সময় সাশ্রয় করেছে। এটি এই প্রশ্নের সামগ্রিকভাবে গৃহীত সমাধান হওয়া উচিত, যেহেতু আমি যতটা পড়েছি, এটি সবচেয়ে সম্পূর্ণ সমাধান। মূলত, অন্যরা অবস্থানের পরে কোনও ব্লকের মূল এক্স-পজিশনের সাথে সমস্যার সমাধান করেনি: স্থির শৈলী প্রয়োগ করা হয়। আপনার সমস্যাগুলি সমাধান করুন। সত্যিই, অনেক ধন্যবাদ!

— মার্কোস বুয়ার্ক

ওহে ডনী, আপনার প্লাগইনকেও পছন্দ করুন (v1.4.1) ... একটি সমস্যা জুড়ে এসেছিল, ব্লক এলিমেটসগুলির কোনও নির্দিষ্ট না থাকলে তাদের প্রস্থটি হারিয়ে ফেলে। আলাদা করার সময় এটি পরিবর্তন করা হয়েছে ... শুধুমাত্র প্রস্থ সেট করে তাই এটি একই থাকে। code// বিচ্ছিন্ন প্যানেল নোড.কম ({"মার্জিন": 0, "বাম": নোড লেফট, "শীর্ষ": নতুননোডটপ, "অবস্থান": "স্থির", "প্রস্থ": নোড.উইথ ()}); code

— হ্যানকক

অনেকগুলি সমাধান অনুসন্ধান এবং চেষ্টা করে এবং এটি "বাক্সের ঠিক বাইরে"। আশ্চর্যজনক কাজ! ধন্যবাদ!

— আজতাতুম

@ উইলহ্যানকক আমি আইপ্যাড সমর্থন যুক্ত করেছি, রিফ্রেশ বাগটি সংশোধন করেছি এবং অন্বেষিত ও অনারেটেড ইভেন্টগুলিতে যুক্ত করেছি। নতুন ইভেন্টগুলি আপনাকে প্যানেল এবং স্পেস্পার্প্যানেলে এটিকে পুনরায় সংযুক্ত করার পরে অ্যাক্সেস দেবে।

— ডোনি ভি।

স্ক্রোলিং ডিভগুলি সমর্থন করার জন্য একটি প্যারেন্টসিলিেক্টর বিকল্প যুক্ত করেছে।

— ডোনি ভি।

Answer 5

এবং এখানে jquery ছাড়াই কীভাবে হয় (আপডেট করুন: অন্যান্য উত্তর দেখুন যেখানে আপনি এখন কেবল CSS এর মাধ্যমে এটি করতে পারেন)

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>

Comments

ধন্যবাদ! আজকাল দেশীয় জেএস সমাধানগুলি সন্ধান করা কঠিন। এটি পুরোপুরি কাজ করে।

— শেরি

তাই আপনাকে অনেক ধন্যবাদ, এই পুরোপুরি কাজ যেহেতু jQuery কিছু উত্তরাধিকার এন্টারপ্রাইজ কোড আমার প্রকল্প রয়েছে তার সাথে পরস্পরবিরোধী ছিল

— sng

যদিও আমি কোনও সমস্যার মধ্যে চলেছি যেখানে আমি পৃষ্ঠার নীচে স্ক্রোল করিলে এটি স্বয়ংক্রিয়ভাবে আমাকে শীর্ষে ফিরিয়ে আনবে।

— এসএনজি

@sng আমার নমুনা পৃষ্ঠাটি কি তা করে?

— জিম ডব্লিউ বলেছেন মনিকা

@ জিমডাব্লু আমি বিষয়টি খুঁজে পেয়েছি। আমি এটি বাম দিকের একটি মূল বিষয়বস্তুর পাশের উল্লম্ব ভিত্তিক মেনু বার দিয়ে ব্যবহার করার চেষ্টা করছিলাম। আপনি যখন নীচে স্ক্রোল করছেন তখন এটি বেরোচ্ছিল কারণ এটি পৃষ্ঠাটির নীচে সঠিকভাবে আঘাত করা কখন তা নির্ধারণ করতে পারে। স্ক্রোল ইভেন্ট শ্রোতার কাছে উইন্ডো স্ক্রিনের আকারে ধারক ডিভ উচ্চতা নির্ধারণের জন্য কোডের একটি লাইন যুক্ত করে শেষ করেছি

— sng

Answer 6

আমি 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);
        }
    });
});

Answer 7

এখানে আরও একটি বিকল্প রয়েছে:

অবশ্যই 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।

Comments

আমি মনে করি এটি একটি খুব পরিষ্কার এবং সহজ সমাধান। আমি কেবল "পরম" উপাদানটিকে অবস্থান দেব না - এটি লেআউটটি ভেঙে দিতে পারে - আমি কেবল এটি স্থির হিসাবে সেট করব।

— জিফ্রিড

Answer 8

হিসাবে জোশ লি এবং কলিন 'টি হার্ট বলেছেন, আপনি বিকল্প হিসেবে শুধু ব্যবহার করতে পারে position: sticky; top: 0;DIV আছে আবেদন করেন যে আপনার বয়স স্ক্রলিং চায় ...

এছাড়াও, আপনাকে কেবলমাত্র যা করতে হবে তা হ'ল এটি আপনার পৃষ্ঠার শীর্ষে অনুলিপি করা বা কোনও বাহ্যিক সিএসএস শীটে ফিট করার জন্য এটি ফর্ম্যাট করা:

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

কেবলমাত্র #sticky_div's_name_hereআপনার ডিভের নামটি প্রতিস্থাপন করুন , যদি আপনার ডিভটি <div id="example">আপনি রাখতেন #example { position: sticky; top: 0; }।

Answer 9

আমার সমাধানটি সামান্য ভার্বোজ, তবে এটি কেন্দ্রিক বিন্যাসের জন্য বাম প্রান্ত থেকে পরিবর্তনশীল অবস্থান পরিচালনা করে।

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

Answer 10

অন্যদের সাথে সমস্যা রয়েছে তাদের জন্য চেষ্টা করার জন্য আরও একটি সংস্করণ এখানে। এটি এই সদৃশ প্রশ্নের আলোচিত কৌশলগুলি একসাথে টেনে নিয়ে যায় এবং প্রয়োজনীয় সহায়ক ডিআইভিগুলি গতিশীলভাবে উত্পন্ন করে যাতে কোনও অতিরিক্ত এইচটিএমএল প্রয়োজন হয় না।

সিএসএস:

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

যখন উপাদানটি স্টিকি হয়ে যায়, কোডটি স্টিকি উপাদান দ্বারা বাম ফাঁক থেকে ঝাঁপ দেওয়া থেকে বাঁচার জন্য অবশিষ্ট সামগ্রীর অবস্থান পরিচালনা করে। এটি আবারও পিছনে স্ক্রোল করার সময় এটি স্টিকি উপাদানটিকে তার মূল অ-স্টিকি অবস্থানে ফিরিয়ে দেয়।

Comments

আপনার পদ্ধতির জনবি এর পদ্ধতির সাথে খুব মিল । এই উত্তরের সাথে আপনার মতপার্থক্যগুলি বিবেচনা করে আমি ভাবছি (1) দ্বিতীয় "সহায়ক ডিভ" ব্যবহার করার সুবিধা আছে (জনবি যেমন ব্যবহার করে ঠিক 1 এর পরিবর্তে) এবং (2) লুকোচুরি () ব্যবহার করার সুবিধা আছে কি এবং () পরিবর্তে সাহায্যকারী ডিভের উচ্চতা সেট করার পরিবর্তে (জনবি যেমন করেন)? সম্ভবত একটি পারফরম্যান্স পার্থক্য? এখনও অবধি আমি পার্থক্যগুলি সনাক্ত করতে সক্ষম হইনি তবে সম্ভবত কিছু নির্দিষ্ট পরিস্থিতিতে পার্থক্য থাকতে পারে (যেমন ইনলাইন উপাদান বা কোনও কিছু জড়িত থাকতে পারে), তাই আমি জিজ্ঞাসা করি। ধন্যবাদ।

— জেসন ফ্রাঙ্ক

Answer 11

জোশ লির উত্তরের একটি বর্ধিত সংস্করণ এখানে। আপনি যদি ডিভটি ডানদিকে সাইডবারে থাকতে চান এবং একটি ব্যাপ্তির মধ্যে ভাসতে চান (যেমন, আপনাকে শীর্ষ এবং নীচের অ্যাঙ্কর অবস্থান নির্দিষ্ট করতে হবে)। আপনি মোবাইল ডিভাইসে এটি দেখার সময় এটি একটি বাগও ঠিক করে দেয় (আপনার বাম স্ক্রোল অবস্থানটি পরীক্ষা করতে হবে অন্যথায় ডিভ স্ক্রিনটি সরে যাবে)।

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

Answer 12

একই জিনিসটি অনুসন্ধান করার সময় আমি এটি পেরিয়ে এসেছি। আমি জানি এটি একটি পুরানো প্রশ্ন তবে আমি ভেবেছিলাম আমি আরও সাম্প্রতিক উত্তর সরবরাহ করব।

স্ক্রোল্লোরামার একটি 'পিন ইট' বৈশিষ্ট্য রয়েছে যা আমি যা খুঁজছিলাম ঠিক তেমনই।

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

Answer 13

এই অন্যান্য প্রশ্নের উত্তর দেওয়ার জন্য সরবরাহ করা তথ্য আপনার পক্ষে সহায়ক হতে পারে, ইভান:

স্ক্রোল করার পরে উপাদানটি দৃশ্যমান কিনা তা পরীক্ষা করে দেখুন

আপনি ডকুমেন্ট.বডি.স্রোকলট মানটি আপনার এলিমেন্টের শীর্ষের চেয়ে সমান বা তার চেয়ে বড় কিনা তা যাচাই করে তবেই আপনি মূলত উপাদানটির স্টাইলটি স্থির করে সেট করতে চান।

Answer 14

গৃহীত উত্তরটি কাজ করে তবে আপনি যদি উপরে স্ক্রোল করেন তবে আগের অবস্থানে ফিরে যান না। এটি সেখানে রাখার পরে সর্বদা শীর্ষে আটকে থাকে।

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

জ্লেদেভের প্রতিক্রিয়া পুরোপুরি কাজ করে তবে আমি এটি কাজে লাগাতে পারিনি। তাঁর উদাহরণ পৃষ্ঠাটিও কাজ করে নি (আমার জন্য)।

Answer 15

আপনি 3 টি অতিরিক্ত সারি যুক্ত করতে পারেন তাই যখন ব্যবহারকারী শীর্ষে ফিরে স্ক্রোল করবে, ডিভটি তার পুরানো জায়গায় আটকে থাকবে:

কোডটি এখানে:

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

Answer 16

আমার একটি ডিভিতে লিঙ্ক সেটআপ আছে তাই এটি চিঠি এবং সংখ্যা লিঙ্কগুলির একটি উল্লম্ব তালিকা।

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

আমি তারপরে লোড হওয়া অবস্থানটি সংরক্ষণ করতে এই হ্যান্ডি জিকুয়েরি ফাংশনটি সেটআপ করি এবং তারপরে position অবস্থানের বাইরে স্ক্রোল করার সময় অবস্থানটি স্থির করে রাখি।

দ্রষ্টব্য: লিঙ্কগুলি পৃষ্ঠা লোডে দৃশ্যমান হলে এটি কেবলমাত্র কার্যকর হয় !!

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 [e-mail] (Myvendor JavaScript Issue)');
    }
});

Answer 17

আমি এই প্রযুক্তিটি তৈরি করতে উপরের কিছু কাজ ব্যবহার করেছি। আমি এটি কিছুটা উন্নতি করেছি এবং ভেবেছিলাম আমার কাজটি ভাগ করে নেব। আশাকরি এটা সাহায্য করবে.

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

এটি স্ক্রোলটি করার জন্য কিছুটা আরও গতিশীল। এটির জন্য কিছু কাজ দরকার এবং আমি এক পর্যায়ে এটি একটি প্লাগিংয়ে রূপান্তরিত করব তবে এটিই আমি কাজের ঘন্টা পরে নিয়ে এসেছি।

Answer 18

জাভাস্ক্রিপ্টে আপনি এটি করতে পারেন:

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

Answer 19

সঠিক সমাধান নয় তবে বিবেচনার জন্য দুর্দান্ত বিকল্প

এই সিএসএস কেবলমাত্র পর্দার স্ক্রোল বারের শীর্ষে । সঙ্গে সব সমস্যার সমাধান একমাত্র সিএসএস , কোন জাভাস্ক্রিপ্ট, কোন 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">

বিষয়বস্তুটি যথেষ্ট পরিমাণে রেখে দিন যাতে আপনি এখানে প্রভাবটি দেখতে পারেন :) ওহ, এবং রেফারেন্সটি সেখানেও রয়েছে, কারণ তিনি তার creditণের প্রাপ্য

সিএসএস কেবল পর্দার স্ক্রোল বারের শীর্ষে

Comments

কিছুটা

— অফটোপিক

আমি কোনও ভাল সমাধানের বিরুদ্ধে নই, তবে আপনার উত্তরের কোডটি সর্বদা শীর্ষে থাকার জন্য মেনুর মতো কিছু তৈরি করার একটি উপায় সরবরাহ করে। তবে প্রশ্নটি ছিল না ...

— টোক্ক

আপনি কেবল ডিভটি ঠিক করছেন এবং স্ক্রোলিংয়ের ক্ষেত্রে স্টিকি কিছু করছেন না।

— যোগিহোস্টিং

Answer 20

এখানে একটি উদাহরণ যা jquery- দৃশ্যমান প্লাগইন ব্যবহার করে: http://jsfiddle.net/711p4em4/ ।

এইচটিএমএল:

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

Answer 21

পাদচরণ ডিভিটি হিট না হওয়া পর্যন্ত স্টিকি:

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