طراحی منو بالای سایت [بایگانی]

View Full Version : طراحی منو بالای سایت

amirali0079

سه شنبه 04 شهریور 1393, 19:22 عصر

سلام من میخوام یه منو بالای سایت بسازم مثل این http://mobinplus.com/ و میخوام position:fixed ;باشه و وقتی پائین میای height اش کم شه ! کسی هست بلد باشه ؟ :لبخندساده:

Mori Bone

سه شنبه 04 شهریور 1393, 20:20 عصر

کارهایی رو که میخوای بکنی رو بین این بنویس همین و بس:
$(window).scroll(function() {
});

ABZiko

سه شنبه 04 شهریور 1393, 21:53 عصر

از scrollTop هم می تونی استفاده کنی.

amirali0079

چهارشنبه 05 شهریور 1393, 02:10 صبح

آقا میشه بیشتر توضیح بدید ؟ من jQuery هیچی بلد نیستم :لبخند: میشه با CSS نوشت ؟ اگه نمیشه یه نمونه آماده jQuery رو بدید خودم حالیم میشه !

Mori Bone

چهارشنبه 05 شهریور 1393, 08:19 صبح

این یه نمونه خیلی سادشه:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function() {
var topScroll = $(this).scrollTop();
if(topScroll > 100) {
//$('#header').text($('#header').text() + ' >');
$('#header').addClass('fixed').css('top', topScroll);
} else {
$('#header').removeClass('fixed');
}
});
});
</script>
<style>
body {
height: 5000px;
width: 900px;
position: relative;
}
#header {
background-color: #000000;
height: 100px;
width: 100%;
transition: height 0.2s ease-in;
color: #fff;
}
#header.fixed {
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<header id="header"></header>
</body>
</html>

ABZiko

چهارشنبه 05 شهریور 1393, 12:05 عصر

من اون قسمتش رو متوجه نشدم :

.css('top', topScroll);

یعنی منظورتون اینه که فاصله اش از بالا برابر ارتفاع scroll شده باشه؟

Mori Bone

چهارشنبه 05 شهریور 1393, 12:11 عصر

من اون قسمتش رو متوجه نشدم :

.css('top', topScroll);

یعنی منظورتون اینه که فاصله اش از بالا برابر ارتفاع scroll شده باشه؟
آره همینه. اینو من خیلی هول هولی نوشتم و خیلی سطحش پایینه. میتونی خیلی بهتر باشه
ساده نوشتم تا ایجاد کننده این تاپیک طریقه کدنویسی دستش بیاد

ABZiko

چهارشنبه 05 شهریور 1393, 13:10 عصر

آره همینه. اینو من خیلی هول هولی نوشتم و خیلی سطحش پایینه. میتونی خیلی بهتر باشه
ساده نوشتم تا ایجاد کننده این تاپیک طریقه کدنویسی دستش بیاد

آره گفتم چون می شد از position:fixed استفاده کرد.

Mori Bone

چهارشنبه 05 شهریور 1393, 13:26 عصر

شاید دو سه ساعت دگ حرفه ایشو گذاشتم:متفکر:

8908183

شنبه 08 شهریور 1393, 13:37 عصر

ازین نمونه الگو بگیرید، آموزش تصویریه...میتونید پوزیشن رو به fixed تغییر بدید البته.مثل منویی که توی خود این سایت هم استفاده شده ...اگر میخواید با پایین اومدن اسکرول height کم باشه دستوراتتون رو داخل function(){} بنویسید:

$(window).scroll(function(){

})

منو: http://clicksite.ir/article.php?id=47