رفتن به مطلب

سوال درباره کدنویسی


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

سلام

نمونه کد لینک زیر رو میخوام در سایتم جاگذاری کنم اما نمیدونم چطور ( کد مربوط به چسبان کردن سایدبار از نوع هوشمنده)

https://codepen.io/perminder-klair/pen/tdzue

اگه بلدید لطفا راهنمایی کنید و اگه آموزشی سراغ دارید ( که فارسی باشه ) لطفا معرفی کنید...

لینک به ارسال
در ۱ ساعت قبل، پویه گفته است :

سلام

نمونه کد لینک زیر رو میخوام در سایتم جاگذاری کنم اما نمیدونم چطور ( کد مربوط به چسبان کردن سایدبار از نوع هوشمنده)

https://codepen.io/perminder-klair/pen/tdzue

اگه بلدید لطفا راهنمایی کنید و اگه آموزشی سراغ دارید ( که فارسی باشه ) لطفا معرفی کنید...

سلام

این دوتا کد رو داخل هدر بذارید:

<script>
jQuery( document ).ready(function() {
  console.log( "document ready!" );

  var jQuerysticky = jQuery('.sticky');
  var jQuerystickyrStopper = jQuery('.sticky-stopper');
  if (!!jQuerysticky.offset()) { // make sure ".sticky" element exists

    var generalSidebarHeight = jQuerysticky.innerHeight();
    var stickyTop = jQuerysticky.offset().top;
    var stickOffset = 0;
    var stickyStopperPosition = jQuerystickyrStopper.offset().top;
    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
    var diff = stopPoint + stickOffset;

    jQuery(window).scroll(function(){ // scroll event
      var windowTop = jQuery(window).scrollTop(); // returns number

      if (stopPoint < windowTop) {
          jQuerysticky.css({ position: 'absolute', top: diff });
      } else if (stickyTop < windowTop+stickOffset) {
          jQuerysticky.css({ position: 'fixed', top: stickOffset });
      } else {
          jQuerysticky.css({position: 'absolute', top: 'initial'});
      }
    });

  }
});
</script>
<style>
.container {
  width: 1000px;
  position: relative;
}

.header {
  clear: both;
  margin-bottom: 10px;
  border: 1px solid #000000;
  height: 90px;
}

.sidebar {
  float: left;
  width: 350px;
  border: 1px solid #000000;
}

.content {
  float: right;
  width: 640px;
  border: 1px solid #000000;
  height: 800px;
}

.footer {
  clear: both;
  margin-top: 10px;
  border: 1px solid #000000;
  height: 820px;
}
</style>

پ‌ن1: می‌تونید کد استایل رو به جای هدر داخل همون فایل استایل قالبتون بذارید (بدون تگ باز و بسته‌ی style)

پ‌ن2: واسه استفاده از این کدی که گذاشته بودید باید کتابخانه jQuery داخل قالبتون فراخوانی شده باشه (که احتمالا شده، چون خیلی از قالبا و پلاگینا بش احتیاج دارن)

بعد باید کلاس sticky رو به اون سایدباری که می‌خواید چسبان بشه اضافه کنید.

در مرحله‌ی آخر هم باید کد زیر رو در اون جایی قرار بدید که می‌خواید سایدبار متوقف بشه (مثلا اگر می‌خواید قبل از رسیدن به فوتر متوقف شه باید کد رو بالای فوتر بذارید)

<div class="sticky-stopper"></div>

فقط توجه داشته باشید من این موارد رو دقیقا بر اساس همون آدرسی گفتم که لینکشو گذاشته بودید، امتحان نکردم ببینم کار میده یا نه.

راحت‌تر بود اگه از پلاگین‌های خود وردپرس استفاده می‌کردین.

لینک به ارسال
در 35 دقیقه قبل، فرشاد گوهری گفته است :

بعد باید کلاس sticky رو به اون سایدباری که می‌خواید چسبان بشه اضافه کنید.

ممنون ولی این یدونه رو متوجه نشدم...

 

در 36 دقیقه قبل، فرشاد گوهری گفته است :

پ‌ن1: می‌تونید کد استایل رو به جای هدر داخل همون فایل استایل قالبتون بذارید (بدون تگ باز و بسته‌ی style)

میتونم اون دو تا کد بالا رو به جای هدر تو style بزارم؟

لینک به ارسال
در 2 ساعت قبل، پویه گفته است :

ممنون ولی این یدونه رو متوجه نشدم...

خب سایدبار شما یه کلاس داره دیگه، شما باید این کلاس استیکی رو هم به سایدبارتون اضافه کنید (به اون سایدباری که می‌خواید فیکس بشه) مثلا فرض کنید اینجوری:

<div class="sidebar sticky"></div>

 

در 2 ساعت قبل، پویه گفته است :

میتونم اون دو تا کد بالا رو به جای هدر تو style بزارم؟

فقط کد دومی رو می‌تونید داخل فایل استایل بذارید (باید style رو از اول و آخر کد حذف کنید)

لینک به ارسال
در ۱ ساعت قبل، فرشاد گوهری گفته است :

خب سایدبار شما یه کلاس داره دیگه، شما باید این کلاس استیکی رو هم به سایدبارتون اضافه کنید (به اون سایدباری که می‌خواید فیکس بشه) مثلا فرض کنید اینجوری

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

لینک به ارسال
در 1 دقیقه قبل، پویه گفته است :

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

خب اینجوری باید دست ببرید توی کدهای قالب که شخصا توصیه نمیکنم بتون. 

شما به جای اینکه از کد استفاده کنید چرا پلاگین نصب نمیکنید؟ 

https://wordpress.org/plugins/q2w3-fixed-widget/

این پلاگین کل این چیزی که شما میخواید رو داره، حتی خیلی کامل تر. 

لینک به ارسال
در 37 دقیقه قبل، فرشاد گوهری گفته است :

خب اینجوری باید دست ببرید توی کدهای قالب که شخصا توصیه نمیکنم بتون. 

شما به جای اینکه از کد استفاده کنید چرا پلاگین نصب نمیکنید؟ 

https://wordpress.org/plugins/q2w3-fixed-widget/

این پلاگین کل این چیزی که شما میخواید رو داره، حتی خیلی کامل تر. 

از این پلاگین استفاده کردم ، ولی خب اون فقط یک سری ویجت هارو فیکس میکنه که اون چیزی که میخوام نیست ، در ضمن در موبایل هم خیلی آزار دهندس و جلوی دید کاربر رو بدجور میگیره

لینک به ارسال

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

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

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

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

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

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

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

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

×
×
  • اضافه کردن...