گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
با این کلاس ها حل نمیشه
مشکل اینه وقتی حالت اسکرول میشه سایدبار بالا فیکس نمیشه کلاس فیکس تاپ هم تست کردم
میخام بوقتی اسکرول میشه کل ارتفاع رو بگیره سایدبار از نوبار فاصله نگیره
سلام ، برای این موضوع باید از sticky استفاده کنید نه fixed
این لینک رو بررسی کنید
اگه به نتیجه نرسیدید کافیه سرچ بزنید Sticky Sidebar Bootstrap
پایدار باشید.
تازه متوجه منظور شما شدم، عکس گویا نبودش.
این هم کدی که نوشتم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
height: 2000px;
}
.sticky {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row" style="height: 400px;">
<div class="col-sm-4 sticky" style="background-color:lavender;">
<ul class="sticky" style="background-color:lavender;">
<li>home</li>
<li>shop</li>
<li>about-us</li>
<li>contact</li>
</ul>
</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
سلام . من ۲ عدد col ایجاد میکنم و به col اولی sticky میدم . مشکلی که پیش میاد اینه که col دومی میره و زیر col اولی قرار میگیره و در واقع تغییر جا میده . چطور باید مشکلو حل کنم تا col دومی سر جای خودش بمونه ؟ ممنون میشم راهنماییم کنید.
سلام! برای ثابت ماندن سایدبار در بوتسترپ، می‌توانید از کلاس sticky-top در عنصر سایدبار استفاده کنید. این کلاس، سایدبار را در بالای صفحه نمایش می‌دهد و هنگامی که کاربر به پایین صفحه می‌رود، سایدبار را به پایین حرکت نمی‌دهد تا همچنان ظاهر بماند.
به طور کلی، می‌توانید کد HTML سایدبار خود را به صورت زیر تغییر دهید:
<div class="sticky-top">
<!-- محتوای سایدبار -->
</div>با افزودن کلاس sticky-top به عنصر سایدبار، سایدبار شما ثابت می‌ماند و به بالای صفحه چسبیده می‌شود. البته، باید مطمئن شوید که عنصر سایدبار داخل یک عنصری مانند <div class="container"> یا <div class="container-fluid"> قرار دارد تا مناسب برای سایزگیری صفحه باشد.
اگر با این روش سایدبار شما ثابت نمی‌ماند، ممکن است دلیل دیگری نیز وجود داشته باشد. در این صورت، بهتر است کد HTML و CSS کاملتری از سایدبار خود را ارائه دهید تا بتوانم بهتر کمک کنم.