টুইটারের বুটস্ট্র্যাপ ২.১.০ এ নতুন অ্যাফিক্স প্লাগইনটি কীভাবে ব্যবহার করবেন?

Question

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

জেএসফিডাল যেমন নাভবার ধারণাটি নিয়ে কাজ করে না, তাই আমি ন্যূনতম উদাহরণ হিসাবে ব্যবহারের জন্য একটি পৃথক পৃষ্ঠা সেট আপ করেছি: http://i08fs1.ira.uka.de/~s_drr/navbar.html

আমি এটি আমার নাবার হিসাবে ব্যবহার করি:

<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a> 
                This is my navbar.
             </div>
        </div> <!-- container -->
    </div> <!-- navbar-inner -->
</div> <!-- navbar -->

আমি মনে করি যে আমি data-offset-top0 মানের হতে চাই (যেহেতু বারটি "শীর্ষে থাকা উচিত" তবে 50 এর সাথে কমপক্ষে কিছু প্রভাব দেখতে পারা যায়)।

যদি জাভাস্ক্রিপ্ট কোডটি জায়গায় রাখে:

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

কোন সাহায্য প্রশংসা।

Comments

আপনি কি আপনার পৃষ্ঠার মূল ন্যাভ-বারে affix () ব্যবহার করার চেষ্টা করছেন?

— নিতিন এমানুয়েল

@ নিথিনইমানুয়েল হ্যাঁ, পোস্টে বা নমুনায় জাভাস্ক্রিপ্টটি দেখুন: i08fs1.ira.uka.de/~s_drr/navbar.html

— ডায়নালন

আপনি কেন .navbar-fixed-topaffix () ব্যবহারের পরিবর্তে ব্যবহার করবেন না ?

— নিতিন এমানুয়েল

@ নিতিনইমেনুয়েল কারণ আমি যা চাই তা তা নয়। .navbar-fixed-topনাভবারকে সারাক্ষণ শীর্ষে রাখবে । আমি নাবারের উপরে একটি পৃষ্ঠার শিরোনাম চাই এবং নীচে স্ক্রোল করার সময় (এবং এভাবে নভবারটি স্ক্রোলটি সরিয়ে ফেলবে) এটি শীর্ষে আটকে থাকবে - তারপরে এবং কেবল তখনই। বুটস্ট্র্যাপ ডক্স তাদের পূর্ববর্তী ডক্সে সাবনাভের মতো একই পদ্ধতি ব্যবহার করেছিল, দুঃখের সাথে তারা এটিকে 2.1.0 ডক্সের জন্য সরিয়ে ফেলেছে।

— ডায়নালন

একটির জন্য আপনার জাভাস্ক্রিপ্টের নেস্টিংটি ভুল। )};হওয়া উচিত});

— ওভেন

Answer 1

আমারও একই সমস্যা ছিল এবং আমি বিশ্বাস করি যে আমি একটি উন্নত সমাধান পেয়েছি।

data-offset-topআপনার এইচটিএমএল নির্দিষ্ট করে বিরক্ত করবেন না । পরিবর্তে, আপনি কল করার সময় এটি নির্দিষ্ট করুন .affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

এখানে সুবিধাটি হ'ল আপনি data-offset-topবৈশিষ্ট্যটি আপডেট করার প্রয়োজন ছাড়াই আপনার সাইটের বিন্যাস পরিবর্তন করতে পারেন । যেহেতু এটি উপাদানটির আসল গণিত অবস্থান ব্যবহার করে, এটি ব্রাউজারগুলির সাথে অসঙ্গতিগুলিও প্রতিরোধ করে যা উপাদানটিকে কিছুটা পৃথক অবস্থানে রেন্ডার করে।

---

সিএসএসের সাহায্যে আপনাকে এখনও উপাদানটি শীর্ষে বাতাতে হবে। তদুপরি, আমাকে কোনও কারণে width: 100%এনভি এলিমেন্টটি সেট করতে হয়েছিল যেহেতু কোনও কারণে দুর্ব্যবহারকারী .navউপাদানগুলি position: fixed:

#nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

---

একটি শেষ জিনিস: যখন কোনও চিকিত্সা উপাদান স্থির হয়ে যায় তখন এর উপাদানটি আর পৃষ্ঠায় স্থান নেয় না, ফলস্বরূপ এর নীচের উপাদানগুলি "লাফিয়ে" যায়। এই কদর্যতা রোধ করতে, আমি নভবারটি এমনভাবে আবৃত করি divযার রানটাইমের সময় আমি নভবারের সমান হতে সেট করেছি:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

।

$('#nav-wrapper').height($("#nav").height());

---

এটি কার্যকর অবস্থায় দেখার জন্য এখানে বাধ্যতামূলক জেএসফিডাল ।

Comments

"লাফ" মুছে ফেলার দুর্দান্ত টিপ - এই আইটেমটি সরিয়ে ফেলা হয়েছে এবং এই বিষয়টি আমার কোডটির অ্যাফিক্স / জেএস অংশে অন্তর্ভুক্ত রয়েছে বলে সম্পূর্ণরূপে উপেক্ষা করে।

— থমাস

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

— রিকার্ডো ওটারো

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

— orrd

ধন্যবাদ @ অর্ড - আমার উত্তর এবং ফিডল আপডেট করছে!

— নমুউল

নিস! পুরোপুরি কাজ করে এবং এটি খুব মসৃণ। যাইহোক, আমি একটি স্টিকি ফুটার সহ একই উদাহরণটি সন্ধান করছি। আপনি যদি এটি করতে জানেন তবে কী আপনি জেএসফিডেল আপডেট করতে পারবেন? ধন্যবাদ!

— জোসলিন

Answer 2

এই প্রথমবারের জন্য এটি প্রয়োগ করা হয়েছে এবং আমি যা পেয়েছি তা এখানে।

data-offset-topমান পিক্সেল যে আপনার জায়গা নিতে সংযোজিত প্রভাবের জন্য অনুক্রমে স্ক্রল আবশ্যক পরিমাণ। আপনার ক্ষেত্রে, একবার 50pxস্ক্রোল হয়ে গেলে আপনার আইটেমের শ্রেণিটি থেকে পরিবর্তিত .affix-topহয় .affix। আপনি সম্ভবত সেট data-offset-topকরতে চান130px আপনার ব্যবহারের ক্ষেত্রে ।

এই শ্রেণীর পরিবর্তনটি হয়ে যাওয়ার পরে, আপনাকে অবশ্যই ক্লাসের জন্য অবস্থানের স্টাইলিং করে সিএসএসে আপনার উপাদানটি স্থাপন করতে হবে .affix। বুটস্ট্র্যাপ ২.১ ইতিমধ্যে সংজ্ঞায়িত .affixকরেছে position: fixed;তাই আপনাকে যা করতে হবে তা আপনার নিজের অবস্থানের মান যুক্ত করতে হবে add

উদাহরণ:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}

Comments

Thx, যে কিছুটা কাজ করে। আমি আমার উদাহরণ পৃষ্ঠা আপডেট করেছি। সমস্যা এখন, নব্বার সিএসএস ক্লাস হিসাবে "affix" পাওয়ার সাথে সাথে নাভবার সিএসএস ক্লাসটি ফেলে দেওয়া হবে। তবে আমি মনে করি এটি বুটস্ট্র্যাপ থেকে কেবল একটি বাগ / শর্টকমিং। এটি কম এবং dosting বুটস্ট্র্যাপ পুনর্নির্মাণ ব্যতীত পরিবর্তন করা সহজ হবে না।

— ডিনালন

.navbarক্লাসটি সংরক্ষিত থাকায় এটি আমার কাছে দেখাচ্ছে - আপনি কি নিশ্চিত?

— ডেভ কিস

এই উত্তরের জন্য ধন্যবাদ, আমি এটি বের করার চেষ্টা করে যুগে যুগে কাটিয়েছি

— রূবেন

কিছুটা উন্নততর, আরও সাধারণ সমাধানের জন্য আমার উত্তরটি দেখুন ।

— নামুওল

Answer 3

এই সমস্যাটি সমাধান করার জন্য আমি যখন কোনও অবজেক্টটি সংযুক্ত বা শৃঙ্খলিত না হয় তখন jQuery ইভেন্ট নির্গত করতে আমি affix প্লাগইনটি সংশোধন করেছি।

এখানে টানার অনুরোধটি এখানে রয়েছে: https://github.com/twitter/bootstrap/pull/4712

এবং কোড: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

এবং তারপরে নববার সংযুক্ত করার জন্য এটি করুন:

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>

Answer 4

আপনাকে অপসারণ করতে হবে .affix() আপনার স্ক্রিপ্ট থেকে ।

বুটস্ট্র্যাপ data-attributesবেশিরভাগ সময় সরাসরি জাভাস্ক্রিপ্টের মাধ্যমে জিনিসগুলি সম্পাদন করার বিকল্প দেয় ।

Answer 5

আমি এটি টুইটারবুটস্ট্র্যাপের উত্স কোড থেকে পেয়েছি এবং এটি বেশ ভালভাবে কাজ করছে:

এইচটিএমএল:

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

সিএসএস:

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

জাতীয়:

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});

Answer 6

আপনাকে কেবল স্ক্রিপ্টটি সরিয়ে ফেলতে হবে। এখানে আমার উদাহরণ:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>

Answer 7

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

মার্কআপ (এইচএমএল):

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

সিএসএস:

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

Coffeescript:

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()

Answer 8

নববার সংযুক্ত করার জন্য আমার সমাধান:

function affixnolag(){

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function(){      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        })
        .on('unaffixed', function(){
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        });
 }

Answer 9

গৃহীত উত্তরের মতো, আপনি একসাথে সমস্ত কিছু করতে নীচের মতো কিছু করতে পারেন:

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

এটি কেবল affixপ্লাগইনকেই ডাকে না , তবে এটি সংযুক্ত উপাদানটিকে একটি ডিভের সাথে আবৃত করবে যা নাবারের মূল উচ্চতাটি দেখায়।