试图淡化导航背景而不是链接答案

【问题标题】：Trying to fade Navigation background only not links试图淡化导航背景而不是链接
【发布时间】：2016-07-03 03:49:43
【问题描述】：

所以我试图只使用 jquery 淡入导航背景，但是这样做时，它也会以某种方式使导航链接随着导航背景淡出。

这是我的代码：

if ($(this).scrollTop() > 200) {

            $('.navigation').fadeIn(500).css('background-color', '#787878');

        } else {

            $('.navigation').fadeOut(500).not("ul li a");

        }

这是导航

`nav class="navigation" id="nav">
      <ul>
        <li><a href="#top" id="tp_link" class="active">Top</a></li>
        <li><a href="#item2" id="f_link">Item 2</a></li>
        <li><a href="#item3" id="s_link">Item 3</a></li>
        <li><a href="#item4" id="c_link">Item 4</a></li>
        <li><a href="#bottom" id="sm_link">Botton</a></li>
      </ul>
    </nav>`

我尝试使用not() 函数仅省略链接，这样当用户向上滚动时，唯一剩下的就是带有背景图像的链接本身。唯一应该消失的是它背后的背景颜色。

任何关于 jQuery 的建议都会有所帮助。我对它很陌生

【问题讨论】：

.navigation 是包含链接的<div> 吗？
其实更像<nav class="navigation">
链接在<nav>元素内？
我使用 HTML 添加了导航模块
因此调用$('.navigation').fade() 将应用于整个.navigation 元素，包括所有子元素（即链接）。

标签： javascript jquery html dom

【解决方案1】：

使用过渡属性。基本上，您将转换属性设置为导航类的背景颜色并给它一个持续时间。

$(window).scroll(function() {
	if ($(this).scrollTop() > 200) {

            $('.navigation').css('background-color', 'blue');

        } else {

            $('.navigation').css('background-color', 'red');

        }
        });

	.navigation{
		height:1000px;	
		background-color: black;
		transition:background-color 2s;
	}

<!DOCTYPE html>
<html>

<body>
<nav class="navigation" id="nav">
      <ul>
        <li><a href="#top" id="tp_link" class="active">Top</a></li>
        <li><a href="#item2" id="f_link">Item 2</a></li>
        <li><a href="#item3" id="s_link">Item 3</a></li>
        <li><a href="#item4" id="c_link">Item 4</a></li>
        <li><a href="#bottom" id="sm_link">Botton</a></li>
      </ul>
    </nav>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

【讨论】：

【解决方案2】：

我大致给你写了一个代码。以下是如何使用 jquery 仅更改背景颜色的示例。

jQuery

<script type="text/javascript">
    $(document).ready(function myfunction() {
        $("#nav").css("-webkit-transition", "all 0.6s ease")
        .css("backgroundColor", "grey")
        .css("-moz-transition", "all 0.6s ease")
        .css("-o-transition", "all 0.6s ease")
        .css("-ms-transition", "all 0.6s ease");
    });
</script>

HTML

<nav class="navigation" id="nav">
    <ul>
        <li><a href="#top" id="tp_link" class="active">Top</a></li>
        <li><a href="#item2" id="f_link">Item 2</a></li>
        <li><a href="#item3" id="s_link">Item 3</a></li>
        <li><a href="#item4" id="c_link">Item 4</a></li>
        <li><a href="#bottom" id="sm_link">Botton</a></li>
    </ul>
</nav>

【讨论】：

这个工作与这篇文章类似吗？ redvinestudio.com/demos/…
我试图保持链接可见，尽管父容器在向下滚动后到达顶部时会变得半透明或不可见，主要是我的网站由白色背景组成并且链接丢失
@harreola 只需将上面的js代码放入您的滚动功能并根据您的需要进行自定义。这段代码不会影响您的导航链接随着导航背景淡出。
谢谢，我一回到家就试试看:)