مطالب سایت

مشهورهای بی اصل
  • خانه
  • امکانات
    • فن نگارشStyle your text
    • استایل ماژولCustom modules
    • کدهای کوتاهFramework Shortcodes
    • افزودنی هاFramework Add-ons

Sticky

Sticky is a element that transforms in to a fixed position container. Stickies are useful for attracting users attention or to trigger hidden menus. You can also use data-sticky-menu to convert the sticky in to a smooth scroll menu.

options:

Options Description
class="yjsg-sticky" *Required option. Sticky trigger class name.
data-hide *Required option. This option defines if the sticky should be hidden until scrolled in to view or if it should stay visible.
data-pushed *Required option. You can use this option to push sticky down. Set to 0 not to push the sticky.
data-offset *Required option. This is a top position offset where the sticky should become visible.
data-effect *Required option. Sticky has 2 transition options. You can use slide or fade.
class="yjsgsitew" This is optional helper class that can be used inside the sticky contaner. This class holds the site width thus aligns the sticky in the middle.
class="inside-container" This is optional helper class that can be used inside the sticky contaner. This class lines up the grid system paddings.
data-sticky-menu Converts the sticky container in to a smooth scroll sticky menu. Requires specific setup. See markup.
data-sticky-block Converts sticky menu in to a right aligned sticky menu block. Requires specific setup. See markup.

example:

I will become a sticky once you scroll 500px down.
  • Go back up
  • Go to scroll 1
  • Go to scroll 2
  • Go back up
  • Go to scroll 1
  • Go to scroll 2

markup:

<div class="yjsg-sticky" data-hide="no" data-pushed="0" data-offset="500" data-effect="slide">
    <div class="yjsgsitew"> I will become a sticky once you scroll 500px down.</div>
</div>
<div class="yjsg-sticky" data-hide="yes" data-pushed="120" data-offset="400" data-effect="fade" data-sticky-menu>
    <div class="yjsgsitew inside-container">
        <ul class="yjsg-sticky-menu">
            <li>
                <a class="yjscroll" data-before="120" href="#header">
                    Go back up
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll1">
                    Go to scroll 1
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll2">
                    Go to scroll 2
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="yjsg-sticky" data-hide="yes" data-pushed="250" data-offset="550" data-effect="slide" data-sticky-menu data-sticky-block>
    <div class="yjsgsitew inside-container">
        <ul class="yjsg-sticky-menu">
            <li>
                <a class="yjscroll" data-before="120" href="#header">
                    Go back up
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll1">
                    Go to scroll 1
                </a>
            </li>
            <li>
                <a class="yjscroll" data-before="120" href="#scroll2">
                    Go to scroll 2
                </a>
            </li>
        </ul>
    </div>
</div>







I am scroll 1







I am scroll 2

ورود
x

ورود به حساب کاربری

بازیابی رمز عبور

یا
x

تغییر کلمه عبور

لطفا نشانی ایمیل خود را وارد نمایید. زمانی که شما از طریق ایمیل کد تائیدیه رمز عبور را دریافت نمودید قادر خواهید بود تا رمز جدیدی را برگزینید


ثبت
x

یا

Add-ons

  • Sticky
  • Labels
  • Tooltips
  • Off-canvas
  • Grid system
  • Smooth Scroll
  • Helper classes
  • Round progress bars
کلیه حقوق این سایت متعلق به عندلیب آنلاین میباشد
افزودنی ها