رفتن به مطلب
Mohammad-tashi

منویی که با پایین آمدن کاربر شناور بشه؟

پست های پیشنهاد شده

باسلام

بارها توی سایت ها دیدم که چطور یعنی از سایت ها یه گزینه ای(المانی) برای وسط های صفحه در نظر میگیرند و اسکرول که پایین میاد اون المان هم کنده میشه و با کاربر حرکت میکنه

میخاستم بدونم چطور این کار انجام میشه؟

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود بر شما

 

یه پلاگین جی کوئری هست

متسفانه امکان جستجو ندارم اما یکمی بگردید حتما پیدا می کنید این پلاگین خیلی معروفه و زود پیدا میشه

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

البته میتونید یه div هم با css بسازید و position اش رو روی fixed تنظیم کنید و فاصله از راست رو 0 بدید فاصله از بالا رو هم به دلخواه تنظیم کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

البته میتونید یه div هم با css بسازید و position اش رو روی fixed تنظیم کنید و فاصله از راست رو 0 بدید فاصله از بالا رو هم به دلخواه تنظیم کنید.

ممنون بابت پاسختون

اما بیشتر مد نظرمم همون منویی است که با حرکت کاربر بشه فرستادش ته صفحه

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

نمونه :

 

HTML

<div id="main-menu-container">
    <div id="main-menu">
        //your menu
    </div>
</div>
--------------------------------------------------------------
CSS
.f-nav{  /* To fix main menu container */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
#main-menu-container {
    text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
    display: inline-block;
    width: 1024px; /* Your menu's width */
}
-------------------------------------------------------------
JS
 
$("document").ready(function($){
    var nav = $('#main-menu-container');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

 

بهتر از این هم میشه البته.

برای افراد دنبال سوژه این پست 666 بود :)

ویرایش شده توسط تیرداد

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

نمونه :

 

HTML

<div id="main-menu-container">
    <div id="main-menu">
        //your menu
    </div>
</div>
--------------------------------------------------------------
CSS
.f-nav{  /* To fix main menu container */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
#main-menu-container {
    text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
    display: inline-block;
    width: 1024px; /* Your menu's width */
}
-------------------------------------------------------------
JS
 
$("document").ready(function($){
    var nav = $('#main-menu-container');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

 

بهتر از این هم میشه البته.

برای افراد دنبال سوژه این پست 666 بود :)

باتشکر از شما

فقط الان یه سوالی من دارم

من یک باکس دارم

که توش هم منو لود میشه هم باکس سرچ

میخام اگه کاربر اومد پایین این نواز کلا بچسبه به پایین صفحه

برای اینکار چیکارکنم؟

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

باتشکر از شما

فقط الان یه سوالی من دارم

من یک باکس دارم

که توش هم منو لود میشه هم باکس سرچ

میخام اگه کاربر اومد پایین این نواز کلا بچسبه به پایین صفحه

برای اینکار چیکارکنم؟

 

فرقی نمی کنه کافیه که id اون باکس (div) رو بدین .

 

تو این قسمت

 var nav = $('#main-menu-container');

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید ارسال داشته باشید و بعد ثبت نام خود را در سایت کامل نمایید. اگر حساب کاربری در سایت دارید، جهت ارسال با حساب کاربری خود هم اکنون وارد سایت شوید

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • افزودن...