স্টিকি সাইডবার: নীচে স্ক্রোল করার সময় নীচে আটকে থাকুন, উপরে স্ক্রোল করার সময় শীর্ষে

Question 1

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

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

আমি আশা করি এটি যথেষ্ট তথ্য। আমি যে কোনও প্লাগইন / স্ক্রিপ্টগুলি পরীক্ষা করার জন্য একটি জিসফিল তৈরি করেছি, যা আমি এই প্রশ্নের জন্য পুনরায় সেট করেছি: http://jsfiddle.net/jslucas/yr9gV/2/ .

Question 2

+1 খুব সুন্দর এবং চটজলদি ইমেজ।

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি একইভাবে ফোরাম.জকোয়ার.কম.-এ আপনার পোস্ট করা একই প্রশ্নটি পেয়েছি এবং সেখানে একটি উত্তর ^{(@ টাকার973 দ্বারা)} , এটি তৈরি করার জন্য একটি দুর্দান্ত গ্রন্থাগারের পরামর্শ দিয়েছিল এবং এটি এখানে ভাগ করে নিতে চাইছে।

একে @ লেফো দ্বারা স্টিকি-কিট বলা হয়

গিথুব প্রিয়ােক্ট
ওয়েবপৃষ্ঠা
জেএসফিডেলের সাধারণ উদাহরণ ^{(এখানে সংযুক্ত স্নিপেটের মতো একই কোড)}

এখানে আপনার কাছে তৈরি করা খুব মৌলিক উদাহরণের কোড এবং ফলাফলটি দেখার জন্য একটি ওয়ার্কিং ডেমো রয়েছে।

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

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(function() {
  $(".sidebar").stick_in_parent({
    offset_top: 10
  });
});

* {
  font-size: 10px;
  color: #333;
  box-sizing: border-box;
}
.wrapper,
.header,
.main,
.footer {
  padding: 10px;
  position: relative;
}
.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}
.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}
.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}
.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}
.top {
  position: absolute;
  top: 10px;
}
.bottom {
  position: absolute;
  bottom: 10px;
}
.clear {
  clear: both;
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

স্নিপেট প্রসারিত করুন

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

Question 3

দুর্দান্ত গ্রাফিকের জন্য ধন্যবাদ। আমিও এই চ্যালেঞ্জের সমাধান খুঁজছিলাম!

দুর্ভাগ্যক্রমে, এখানে পোস্ট করা অন্য উত্তরগুলির প্রয়োজন # 5 কে সম্বোধন করে না যা পার্শ্বদণ্ডের মধ্যে দিয়ে মসৃণভাবে পিছনে স্ক্রোল করার ক্ষমতাকে স্থির করে।

আমি এমন একটি ফ্রিল্ড তৈরি করেছি যা সমস্ত প্রয়োজনীয়তা কার্যকর করে: http://jsfiddle.net/bN4qu/5/

মূল যুক্তি যা প্রয়োগ করা দরকার তা হ'ল:

If scrolling up OR the element is shorter than viewport Then
  Set top of element to top of viewport If scrolled above top of element
If scrolling down then
  Set bottom of element at bottom of viewport If scrolled past bottom of element

গলদ্বারে আমি লক্ষ্য উপাদানটি ঘুরিয়ে আনতে CSS3 রূপান্তর ব্যবহার করি, সুতরাং এটি IE 9 9 এ কাজ করবে না। যুক্তিটি ভিন্ন পদ্ধতির ব্যবহারের জন্য উপযুক্ত sound

এছাড়াও, আমি আপনার ফিডালটি সংশোধন করেছি যাতে স্টিকি সাইডবারটির গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড থাকে। এটি সঠিক আচরণ প্রদর্শিত হচ্ছে তা দেখাতে সহায়তা করে।

আমি আশা করি এটি কারও উপকারী!

Question 4

এটি কীভাবে প্রয়োগ করা যায় তার একটি উদাহরণ এখানে:

জাভাস্ক্রিপ্ট:

$(function() {

var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;

var $sidebar = $("#sidebar");
if ($sidebar.length > 0) {

    var initialSidebarTop = $sidebar.position().top;

    $window.scroll(function(event) {

        var windowHeight = $window.height();
        var sidebarHeight = $sidebar.outerHeight();

        var scrollTop = $window.scrollTop();
        var scrollBottom = scrollTop + windowHeight;

        var sidebarTop = $sidebar.position().top;
        var sidebarBottom = sidebarTop + sidebarHeight;

        var heightDelta = Math.abs(windowHeight - sidebarHeight);
        var scrollDelta = lastScrollTop - scrollTop;

        var isScrollingDown = (scrollTop > lastScrollTop);
        var isWindowLarger = (windowHeight > sidebarHeight);

        if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
            $sidebar.addClass('fixed');
        } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
            $sidebar.removeClass('fixed');
        }

        var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
        var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

        if (dragBottomDown) {
            if (isWindowLarger) {
                $sidebar.css('top', 0);
            } else {
                $sidebar.css('top', -heightDelta);
            }
        } else if (dragTopUp) {
            $sidebar.css('top', 0);
        } else if ($sidebar.hasClass('fixed')) {
            var currentTop = parseInt($sidebar.css('top'), 10);

            var minTop = -heightDelta;
            var scrolledTop = currentTop + scrollDelta;

            var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
            var newTop = (isPageAtBottom) ? minTop : scrolledTop;

            $sidebar.css('top', newTop);
        }

        lastScrollTop = scrollTop;
        wasScrollingDown = isScrollingDown;
    });
}
});

সিএসএস:

#sidebar {
  width: 180px;
  padding: 10px;
  background: red;
  float: right;
}

.fixed {
  position: fixed;
  right: 50%;
  margin-right: -50%;
}

ডেমো: http://jsfiddle.net/ryanmaxwell/25QaE/

এটি সমস্ত পরিস্থিতিতে প্রত্যাশার মতো কাজ করে এবং আইই-তেও এটি সমর্থনযোগ্য।

Question 5

আমি ঠিক একই জিনিস খুঁজছিলাম। স্পষ্টতই গ্রাফিকের সাথে একটি অনুরূপ প্রশ্ন খুঁজতে আমাকে কিছু অস্পষ্ট পদ অনুসন্ধান করতে হয়েছিল। আমি ঠিক যা খুঁজছিলাম তা সন্ধান করে। আমি কোনও প্লাগইন খুঁজে পাইনি তাই আমি নিজেই এটি তৈরি করার সিদ্ধান্ত নিয়েছি। আশা করি কেউ এটিকে দেখে তা পরিমার্জন করবেন।

এখানে আমি ব্যবহার করছি একটি দ্রুত এবং নোংরা নমুনা।

<div id="main">
    <div class="col-1">
    </div>
    <div class="col-2">
        <div class="side-wrapper">
            sidebar content
        </div>
    </div>
</div>

আমি তৈরি jQuery এখানে:

var lastScrollPos = $(window).scrollTop();
var originalPos = $('.side-wrapper').offset().top;
if ($('.col-2').css('float') != 'none') {
    $(window).scroll(function(){
        var rectbtfadPos = $('.rectbtfad').offset().top + $('.rectbtfad').height();
        // scroll up direction
        if ( lastScrollPos > $(window).scrollTop() ) {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // if has reached the original position, return to relative positioning
            if ( ($(window).scrollTop() + $('#masthead').height()) < originalPos ) {
                $('.side-wrapper').css({
                    'position': 'relative',
                    'top': 'auto',
                    'bottom': 'auto'
                });
            } 
            // sticky to top if scroll past top of sidebar
            else if ( ($(window).scrollTop() + $('#masthead').height()) < $('.side-wrapper').offset().top && $('.side-wrapper').css('position') == 'absolute' ) {
                $('.side-wrapper').css({
                    'position': 'fixed',
                    'top': 15 + $('#masthead').height() + 'px', // padding to compensate for sticky header
                    'bottom': 'auto'
                });
            }
        } 
        // scroll down
        else {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // check if rectbtfad (bottom most element) has reached the bottom
            if ( ($(window).scrollTop() + $(window).height()) > rectbtfadPos && $('.side-wrapper').css('position') != 'fixed' ) {
                $('.side-wrapper').css({
                    'width': $('.col-2').width(),
                    'position': 'fixed',
                    'bottom': '0',
                    'top': 'auto'
                });
            }
        }
        // set last scroll position to determine if scrolling up or down
        lastScrollPos = $(window).scrollTop();

    });
}

কিছু নোট:

। Sidebtfad আমার সাইডবারের নীচে সর্বাধিক উপাদান
আমি আমার # মাথার মাথার উচ্চতাটি ব্যবহার করছি কারণ এটি একটি আঠালো শিরোনাম তাই এর জন্য ক্ষতিপূরণ প্রয়োজন
আমি একটি প্রতিক্রিয়াশীল নকশা ব্যবহার করছি এবং ছোট পর্দায় এই সক্রিয় করতে চাই না যেহেতু কর্নাল -২ ফ্লোটের জন্য একটি চেক রয়েছে

যদি কেউ এটিকে আরও কিছুটা পরিমার্জন করতে পারেন তবে দুর্দান্ত d

Question 6

function fixMe(id) {
    var e = $(id);
    var lastScrollTop = 0;
    var firstOffset = e.offset().top;
    var lastA = e.offset().top;
    var isFixed = false;
    $(window).scroll(function(event){
        if (isFixed) {
            return;
        }
        var a = e.offset().top;
        var b = e.height();
        var c = $(window).height();
        var d = $(window).scrollTop();
        if (b <= c - a) {
            e.css({position: "fixed"});
            isFixed = true;
            return;
        }           
        if (d > lastScrollTop){ // scroll down
            if (e.css("position") != "fixed" && c + d >= a + b) {
                e.css({position: "fixed", bottom: 0, top: "auto"});
            }
            if (a - d >= firstOffset) {
                e.css({position: "absolute", bottom: "auto", top: lastA});
            }
        } else { // scroll up
            if (a - d >= firstOffset) {
                if (e.css("position") != "fixed") {
                    e.css({position: "fixed", bottom: "auto", top: firstOffset});
                }
            } else {
                if (e.css("position") != "absolute") {
                    e.css({position: "absolute", bottom: "auto", top: lastA});
                }               
            }
        }
        lastScrollTop = d;
        lastA = a;
    });
}

fixMe("#stick");

কাজের উদাহরণ: https://jsfiddle.net/L7xoopst/6/

Question 7

ওয়ার্ডপ্রেস সংগ্রহস্থলে অপেক্ষাকৃত অজানা প্লাগইন রয়েছে যা ডাব্লুপি স্টিকি সাইডবার নামে পরিচিত। প্লাগিনটি যা চেয়েছিল ঠিক তেমনই করে (স্টিকি সাইডবার: নীচে স্ক্রল করার সময় নীচে আটকে থাকুন, উপরে স্ক্রোল করার সময় শীর্ষে) ডাব্লুপি স্টিকি সাইডবার ওয়ার্ডপ্রেস সংগ্রহস্থল লিঙ্ক: https://wordpress.org/plugins/mystickysidebar/