پویه

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

7 پست در این موضوع قرار دارد

سلام

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

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

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

0

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


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

سلام

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

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>

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

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

1

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


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

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

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

 

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

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

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

0

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


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

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

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

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

 

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

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

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

0

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


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

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

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

0

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


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

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

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

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

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

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

1

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


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

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

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

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

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

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

0

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

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

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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