隨滾動而變化的動畫粘性標題
[英]Animated sticky header that changes WITH scroll
問題描述
我一直在嘗試制作像其他數百個網站一樣的動畫粘性標題。 所不同的是，我希望動畫隨滾動一起移動，而不是在經過某個滾動點后才捕捉到新的大小。
我正在嘗試做的一個例子是在此站點上： http : //www.kriesi.at/themes/enfold/
任何幫助表示贊賞，我對javascript還是很陌生，所以我希望這不是我不了解Google的情況。
編輯：這是我到目前為止（修復了我問題的主要部分）
$(function () {
$(window).scroll(function () {
var scroll = getCurrentScroll();
var progress = ((scroll * 145) / 100);
var prog = document.getElementById("prog");
prog.innerHTML = scroll + "px " + progress + "%";
header = document.getElementById('header');
if (progress < 5) {
header.style.height = 145 + "px";
}
if (progress > 5 || progress < 100) {
header.style.height = (145 - progress + (scroll / 2)) + "px";
}
if (progress >= 100) {
header.style.height = 75 + "px";
header.style.opacity = 0.8;
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
當中間的if語句為true時，用戶將在標題的最小（0）和最大滾動點（150）之間。 為什么第一個If語句不起作用，因為當我用觸控板向上滾動通過頁面頂部時，標題會繼續增長嗎？
3 個解決方案
解決方案1
1 2015-02-04 04:28:44
您創建2個不同的類。 常規標頭為1類，粘性標頭為1類。 使用jQuery來檢測窗口的滾動位置。 通常，人們使用css3過渡來制作動畫，但為了快速更改而將其省略。
HTML
<header>Sticky Header</header>
CSS
header {
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family:'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 12px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}
JQUERY
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('header').addClass("sticky");
} else {
$('header').removeClass("sticky");
}
});
您可以在webdesignerdepot上閱讀有關此主題的教程。
解決方案2
0 2015-02-04 04:28:56
首先將標題設置為固定和100％，可能會添加z-index。
然后，您將需要以下CSS
.header{
position:fixed;
width:100%;
height:100px;
z-index:9999; //only if you need the header on top of everything
}
.header.shorty{
height:50px;
}
然后，一旦頁面滾動，我們就可以添加shorty調用。
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$(".header").addClass("shorty");
}else{
$(".header").removeClass("shorty");
}
});
解決方案3
0 2015-02-04 04:35:46
這可能並不完美，但這是我認為您想做的事情以及我做事的方式。 如果這是不對的，不好意思。
window.onload = function() { $("#everything").scroll(function() { var startAt = 40; //How many pixles scrolled to start effect, 0 would match link if ($("#everything").scrollTop() >= startAt) { var scroll = $("#everything").scrollTop(), total = 0, // go to this value distance = 40, //distance to shrink value = (scroll < distance) ? total : total + (distance - (scroll - startAt)); $("#head").css("height", value); //change #head to what ever you want to shrink } else { $("#head").css("background-color", value); } }); }
html, body { overflow: hidden; /* Disables regular scrolling */ margin: 0; padding: 0; width: 100%; height: 100%; } #everything { overflow: scroll; /* enables content to scroll */ position: relative; width: 100%; height: 100%; padding-top: 40px; } #head { width: 100%; height: 40px; background-color: red; position: fixed; top: 0px; overflow: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="everything"> <div id="head">header</div> <span> Text Following text is so the page can scroll: <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta velit eu turpis imperdiet congue. Morbi nec mi ipsum. Nam eu nunc in lorem sagittis feugiat a quis nisl. Donec suscipit leo quis magna egestas, id convallis leo gravida. Curabitur finibus lectus ut metus feugiat, eu tincidunt eros tempor. Fusce facilisis nunc vulputate, posuere velit nec, ultrices diam. Vestibulum aliquam velit in lectus imperdiet, vitae condimentum lectus finibus. Aliquam ac arcu eget velit molestie rhoncus. Etiam rhoncus, tellus nec lacinia porta, diam lorem ultrices sem, et dignissim ipsum augue non augue. Suspendisse tincidunt felis sit amet orci accumsan, at ornare tellus viverra. Nam viverra nulla in urna elementum ornare.Sed interdum nisi libero, id porta turpis consectetur vitae. Curabitur nunc ex, interdum eget hendrerit maximus, faucibus non est. Etiam scelerisque condimentum eleifend. Integer ac ligula eget magna porta tristique at eu neque. Sed venenatis ipsum non metus sodales finibus. Suspendisse nec nunc lobortis ligula venenatis tristique. Suspendisse aliquam leo elit, et pretium ipsum tempor sed. Maecenas tincidunt dictum leo sit amet accumsan. Nullam eu viverra nulla. Aenean vehicula tellus a mauris malesuada interdum. Sed libero lacus, consectetur at condimentum vel, egestas vitae nisl.Mauris facilisis tincidunt magna, at gravida elit. Cras molestie eros sed tincidunt ultricies. Pellentesque eleifend egestas orci, sit amet condimentum nisl semper eleifend. Sed ipsum elit, aliquet nec lacinia a, maximus eu dolor. Quisque finibus efficitur odio gravida convallis. Vivamus nec velit in est ornare luctus at a risus. In hac habitasse platea dictumst. Proin condimentum eget est non posuere. Vivamus ante quam, bibendum in tincidunt ut, egestas sed mauris. Nunc non interdum nibh, nec ornare tellus. In interdum elit nisi, a interdum est tempor id. Cras a elit ut purus ornare mollis sit amet ut est. Cras ut ex sed neque lacinia accumsan quis aliquet turpis. Quisque nisl nunc, pretium sed lectus pretium, lacinia ornare magna. Curabitur sit amet felis turpis. Morbi nisi mi, mattis quis tempor ut, accumsan nec ex. </span> </div> </body> </html>
使用翻譯的動畫粘頁眉
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.