ثابت نگاه داشتن اشیاع بر روی صفحه با Jquery

امروز داشتم روی یه قالب کار میکردم و نیاز داشتیم تا یه منو در کنار صفحه بصورت شناور داشته باشیم که هر وقت کاربر صفحه رو بالا پایین کرد منوی ما هم بصورت خودکار توی صفحه بالا و پایین بشه و همیشه در دسترس کاربر باشه

این کار از چندین طریق ممکن هستش و روی اینترنت هم خیلی از سایت ها دارن ازش استفاده می کنند .

مثلا توی css خیلی راحت میتونیم با استفاده از دستور position : fixed این کار رو انجام بدیم و آیتم مورد نظر خودمون رو روی صفحه بصورت شناور قرار بدیم .

اما خوب این روش چند تا مسئله داره (البته نمیشه بهشون گفت مشکل چون همون کار رو برای ما انجام میده ولی ما با جی کوئری میتونیم کدی بهینه تر ایجاد کنیم)

بله با استفاده از Jquery میشه کدهایی بهینه تر نوشت تا زیبایی کار ما دو چندان بشه و البته اختیارات بیشتری هم در اختیار داشته باشم

برای این منظور هم راه های مختلفی وجود داره . از جمله استفاده از ماژول ها و کدهای آماده و یا اینکه اگه خودمون کدنویسی خوبی داشته باشیم میتونیم این کار رو خودمون هم انجام بدیم ...

من همیشه خودم کدنویسی میکردم چون عموما دوست ندارم توی پروژه خودم 50 تا فایل js وکه هرکی با یه سلیقه ای کدنوشته رو از اینترنت دانلود کنم و قرار بدم ...

اما داشتم یه نگاهی تو اینترنت مینداختم که به یه قطعه کد برخورد کردم که واقعا یکی از بهینه ترین قطعه کدهایی بود که من تا حالا دیده بودم که توی ادامه مطلب میتونید مشاهده کنید

اول از همه قطعه کد مورد نظر رو میذارم و بعد به معرفی نحوه کارکرد اون میپردازیم و توضیحش میدیم

<script type="text/javascript">
      $(document).ready(function() {

            var $scrollingDiv = $("#preview-div");
            var elemTop = $scrollingDiv.offset().top;

            $(window).scroll(function(){
                 $scrollingDiv.stop();

                 if ($(window).scrollTop()>elemTop) {
                       $scrollingDiv.animate({"marginTop": ($(window).scrollTop()-elemTop) + "px"}, "slow" );
                 } else {
                       $scrollingDiv.animate({"marginTop": "0px"}, "slow");
                 }
            });

       });

</script>

توی این قطعه کد فقط و فقط کافیه تا id آیتم مورد نظر خوتون که میتونه یه div یا هر چیز دیگه ای باشه رو توی قسمتی که با رنگ قرمز مشخص شده قرار بدید و کاری هم نداشته باشید به باقی کار .
کاری که این قطعه کد انجام میده اینه که آیتم مورد نظر جای مشخص شده خودش توی صفحه بطور پیشفرض قرار میگیره ...
وقتی ما اسکرول صفحه رو تکون میدیم ، تا وقتی که از آیتم مورد نظر رد نشده باشیم ، آیتم سر جای خودش قرار خواهد داشت . ولی وقتی از آیتم مورد نظر رد شدیم ، اون هم به همراه یه حالت انیمیشنی زیبا به همراه اسکرول صفحه دنبال ما میاد .
همچنین وقتی برمیگیردیم به بالا ، خود میره و بطور خودکار سر جای خودش قرار میگیره ...

نمونه اجرایی اون رو هم وقتی سایت مورد نظرمون آپلود شد براتون میذارم تا توی همون سایت مشاهده کنید

خواهشا اگه کدهای بهینه تر دارید یا نظر و سوالی در مورد این قطعه کد دارید توی بخش نظرات مطرح کنید ...