更改单页网站上某一点的菜单颜色

Question

我正在制作一个单页作品集网站。该网站的内容可以水平滚动，只有菜单是固定的。前两页为黑色，最后一页为白色。但第三页是半黑半白的，它就像是两个不同背景之间的分隔线。

目前这是我问题的最佳解决方案：http://jsfiddle.net/a5a7x/1/ 但我只有让它水平滚动而非垂直滚动的问题。

这是我想要放置分隔符的页面内容：http://jsfiddle.net/n3FGr/

请记住，我只需要分割菜单，因为它将被固定，所以只有菜单会有分割线，当内容向左或向右滑动时。

- DeanDeey

---

当前背景是颜色（CSS），但使用图像也没有问题。 - DeanDeey

@madfriend - 嗯，背景基本上已经设定好了，是可以滚动的黑白。请随意展示一下如何使用渐变完成它，而不是一些半透明的字母改变颜色之类的。需要是黑白？ - adeneo

哇，你们真快。这是我创建的网站：http://dejan-markovic.com/DM-test/这是 jsfiddle：http://jsfiddle.net/V7YXC/这是我找到的一个网站，它使用了我想要的东西。菜单是用图片和 z-index 制作的：http://www.tokiolab.it/#/ - DeanDeey

黑客：http://jsfiddle.net/KGWwD/。想知道是否有更好的方法。 - pimvdb

仅通过CSS，我无法让对角线正常工作，只有通过SVG才行：http://jsfiddle.net/Z5RCg/1/。 - pimvdb

Answer 1

快速且简单的近似解决方案

我探索了实现您目标的方法并进行了一些实验：

• 文字居中
• 文字在左上角
• 菜单在左上角
  

虽然没有完美的解决方案，但结果相当不错：(dabblet演示)

HTML：

<div>
    <h1>Chess</h1>
</div>

CSS（层叠样式表）：

div {
    background: linear-gradient(45deg, black 52%, white 52%);
}

ul {
    background: linear-gradient(45deg, white 52%, black 52%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

工作方法：

同步每个渐变中的百分比：

52%：
62%：

优点：

• 纯 html&css

缺点：

• 只支持webkit；

Canvas方式

优点：

• 跨浏览器（包括移动端）

缺点：

• 需要Javascript

SVG方式

优点：

• 跨浏览器
• 无需Javascript（在静态情况下）
• 比Canvas更加语义化

- Vladimir Starkov

---

谢谢你的想法，它给了我灵感 - 这是我的尝试结果：http://jsfiddle.net/teHLS/. - pimvdb

我想尝试用SVG的方式来实现。这些解决方案真的很棒，但每当页面需要水平滚动时，我总是遇到问题。通过您的代码，您告诉元素在那个倾斜分割页面后面。但我先有一些黑色页面，然后才是半页。我现在正在尝试制作SVG文本，但要将所有页面的反转图像放在背景上。所以在黑色上是白色文本，然后在白色上是黑色文本。但这并不简单。 - DeanDeey

@DeanDeey 是的，这是一个相当困难的问题。你做了什么？ - Vladimir Starkov

是的，这就是问题所在。有很多解决方案，但当涉及到移动物体等滚动时，我总是遇到问题。我尝试使用SVG文本剪辑。因此，从SVG制作菜单，然后放置一个反转的黑/白图像，在内容滚动时应该滚动，因此文本应该完美更改...但这只是理论..最大的问题是，SVG的代码应该在一起，例如10行，但我需要将剪辑图像放在内容div上，然后我就停下来了。 - DeanDeey

你的解决方案是最好的，只要你不关注内容重复。我明天会尝试创建SVG解决方案（现在是我所在地的早上6点）。 - Vladimir Starkov

Answer 2

你不能在CSS3中使用对角渐变吗？比如说用黑色渐变到50%，然后在51%处变成白色？

background-image: linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -o-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -moz-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -webkit-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -ms-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);

background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.54, rgb(0,0,0)),
color-stop(0.55, rgb(255,255,255))
);

- Alex Reynolds

Answer 3

如何在菜单项的点击事件中更改CSS颜色：

$('#link1 a').click(function(){
    goTo(0,0);
$('#navigation ul li a').css('color','#fff');  
});


$('#link2 a').click(function(){
    goTo(1,0);
$('#navigation ul li a').css('color','#fff');
});

$('#link3 a').click(function(){
    goTo(2,0);
$('#navigation ul li a').css('color','#000');
});

$('#link4 a').click(function(){
    goTo(3,0);
$('#navigation ul li a').css('color','#000');
});

JSFIDDLE: http://jsfiddle.net/V7YXC/2/

JSFIDDLE：{{link1：http://jsfiddle.net/V7YXC/2/}}

- sanusart

---

脚本使菜单在黑色背景页面上变黑，仅在滚动到白色页面后才变为白色。 - Vladimir Starkov