- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在网上搜索了 100 次,只为找到我想要的东西。我一无所获,并尝试自己做。两天后我因为很多原因放弃了。所以我在这里问大家是否有人可以为我做这件事。想想一个棍子标题,你向下滚动一个网站,标题固定在顶部。所以我的想象是,每次标题点击带有 data-color="#2D2D2D"
的部分时,标题背景颜色都会随之改变。但是等等,我希望它与背景图像成线性关系,所以如果他向后滚动,它的着色与之前的颜色成线性关系。
这是我看过的文章。但它只是一个图像,它在内容中。 https://codyhouse.co/demo/fixed-background-effect/index.html
这是我的笔(只是试了一下) http://codepen.io/muuvmuuv/pen/MarxYx
最佳答案
我已经根据您的需要制作了一个基本示例,请看一下,如果我理解您说的,请告诉我。我在 js 代码中添加了一些额外的解释, fiddle 在本文末尾。
基本的 HTML 标记
<heade id="webHeader">
<nav>
<ul>
<li><a href="#">Nav item 1</a></li>
<li><a href="#">Nav item 2</a></li>
<li><a href="#">Nav item 3</a></li>
</ul>
</nav>
</heade>
<section id="section-1" data-color="#330000"></section>
<section id="section-2" data-color="#00B200"></section>
<section id="section-3" data-color="#803380"></section>
我打算使用 SCSS,但您可以轻松更新到基本 CSS(我假设默认情况下是粘性 header ,所以我在正文中添加了一个填充,其值与 header 高度相同)
$headerHeight: 100px;
body {
padding-top: $headerHeight;
}
#webHeader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $headerHeight;
background: #000F1F; /*default background color and fallback if there is no section available for it*/
nav {
padding: 40px;
float: right;
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #fff;
font-weight: 700;
text-decoration: none;
}
}
}
section {
width: 100%;
height: 500px;
background-color: grey;
border-bottom: 1px dashed #fff;
}
还有 jQuery 代码。
(function($){
// cache dom elements
var $header = $('#webHeader');
var $window = $(window);
var headerHeight = $header.outerHeight(true);
var colors = []; // add colors here
var sections = []; // add sections positions
$('section').each(function(){
var $this = $(this);
colors.push($this.data('color'));
sections.push($this.position().top);
});
// duplicate first color
colors.unshift(colors[0]);
$window.on('scroll', function(){
var position = $window.scrollTop() + headerHeight;
var index = inInterval(position, sections);
var distance = position - sections[index];
$header.attr('style', linearGradient( colors[index+1], colors[index], distance ) );
}).trigger('scroll');
// trigger scroll when the page is loaded to update the header color to the current position
})(jQuery);
// Treat array elements as intervals
function inInterval(value, array) {
// cache array length
var arrLen = array.length;
// Add one more value at the end of array to avoid having problems on last item
array.push(array[arrLen-1]*2);
for (var i = 0; i < arrLen+1; i++)
if (value >= array[i] && value <= array[i+1])
return i;
}
function linearGradient(start, end, distance) {
var distanceStart = distance + '%';
var distanceEnd = 100 - distance + '%';
return "background: -webkit-gradient(linear, left top, left bottom, color-stop(0, "+ start +"), color-stop("+ distanceStart +", "+ start +"), color-stop("+ distanceStart +", "+ end +"), color-stop(100, "+ end +")";
}
你可以看到它在这个 fiddle 中工作.我会做一些更新,但我现在有点忙,但我建议你阅读更多关于 jQuery debounce 的信息并尝试smart scroll (对于调用较少的滚动事件很有用 - 有利于性能)
我希望是你正在寻找的:)
关于javascript - 粘性标题动画线性背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33275181/
我有一个脚本,允许在向下移动时快速滚动,但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport),则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗? 我专注于 android 浏览器。 最佳答案 不,滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切,但是,不幸的是,检查客户端浏览器我发现没有添加 cookie(平
清理并重建后,Eclipse Problems View 中出现错误标记,尽管一切都应该没问题。 如何消除这种不一致的错误? 最佳答案 在这里,我回答自己接下来的步骤对我有用: 关闭 Eclipse
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
我希望我的 div 调用:如果我向下滚动,top 将粘在顶部,但现在它不会粘在顶部。 我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
早上好,我正在为我的网站制作一个粘性 header ,我已经让它工作了,但它似乎卡入到位,我想要顺利!我该怎么做? 我的网站:http://www.trevorpeters.co.uk/tpwebde
我有一个用于我正在处理的小测试站点的导航栏,我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方,直到您
我的页脚设计为位于页面底部,即使其上方的 div 仅包含少量内容。它直到最近才起作用,我似乎以某种方式破坏了它。你能看看吗? 提前致谢。 CSS: body { margin: 0;
我想在加载时让整个 UI 适合屏幕,但我的页脚没有固定在移动设备上的 View 底部。 在桌面网络浏览器上,它可以完美运行。当我在移动网络浏览器上查看此内容时,页脚位于页面下方,使页面可滚动。它不应该
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时,我可以让页脚粘在页面底部,但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推?一个很好的例子是
我正在尝试实现一个粘性标题,在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来,向下滚动时它会再次隐藏,当您滚动回页面顶部时也会返回到它的原始状态。 这正是我想要的外观/感觉
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件,我对此非常满意,但标题仅出现在一些像素之后,并不总是在顶部可见。有谁知道我如何修改代码以使其始
我目前正在创建一个网站,遇到了一个问题,每当我滚动我的粘性标题时,页面就会跳到下一个元素的底部,有人知道这是为什么吗? 我已经尝试更改页面上基本上所有元素的填充,包括横幅、标题、文本本身,甚至 anc
我创建了一个简单的表格,顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码? 谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
使用我当前的代码,当页面加载时,白色条形标题位于顶部。当你滚动时,它会消失,当你滚动到顶部时,白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
我到处都看到这个问题的变体,但似乎没有一个能解决我的问题。我有一个高大的页面,由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;",暂且称之
我创建了一个 header ,位置设置为粘性,顶部设置为 0。但是,如果我向下滚动页面,标题会在某个时候停止随页面滚动。 我认为这很容易解决,但我太笨了... 我试图删除其他元素,因为我认为它们与标题
我的代码有点卡在粘性 header 上。 如果达到 770px 点,标题将缩小。但是当我尝试在浏览器上进行测试时,这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770),
我是一名优秀的程序员,十分优秀!