我希望我的侧面固定链接在滚动时改变它们的颜色,具体取决于背景颜色。如果背景为白色 - 则将链接颜色更改为 #000,否则为 #fff。 我试过 CSS mixed-blend-mode: difference,但是没有控制颜色的选项。所以我想用jquery来做。我该怎么做?
这是我的代码示例
.right-aside {
position: fixed;
z-index: 10;
right: -10px;
top: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
width: 180px;
padding: 0;
font-size: 16px;
line-height: 21px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
text-transform: uppercase;
float:left;
height: fit-content;
}
.right-aside__menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.right-aside__menu ul li a {
display: block;
text-align: center;
transition: all 300ms;
color: #fff;
}
.left-aside {
position: fixed;
z-index: 10;
left: -10px;
top: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
width: fit-content;
padding: 0;
font-size: 16px;
line-height: 21px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
text-transform: uppercase;
float:left;
}
.left-aside__menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.left-aside__menu ul li a {
display: flex;
text-align: center;
transition: all 300ms;
color: #fff;
}
.left-aside__menu-item-link .uk-icon {
margin-right: 10px;
min-width: 20px;
}
.wrapper {
height: 100%;
}
.wrapper div {
height: 50vh;
}
.wrapper div:nth-child(2n+1) {
background: green;
}
<div class="wrapper">
<div></div>
<div class="white"></div>
<div></div>
<div class="white"></div>
<div></div>
</div>
<aside class="right-aside">
<nav class="right-aside__menu">
<ul class="right-aside__menu-list">
<li class="right-aside__menu-item ">
<a href="" class="right-aside__menu-item-link" title="phone">
<span class="right-aside__menu-icon">
</span>
<span class="phone-vertical">+7 777 777 77 77</span>
</a>
</li>
</ul>
</nav>
</aside>
<aside class="left-aside">
<nav class="left-aside__menu">
<ul class="left-aside__menu-list">
<li class="left-aside__menu-item ">
<a href="https://www.instagram.com/" class="left-aside__menu-item-link" title="contacts">
<span uk-icon="icon: instagram"></span>
<span class="phone-vertical">instagramaccount</span>
</a>
</li>
</ul>
</nav>
</aside>
答案 0 :(得分:0)
向您的文档添加滚动侦听器并使用以下代码:
$document.scroll(function() {
if ($document.scrollTop() >= 50) {
// After the user reaches to position, this code will change text color.
$("element").addClass("blackColor");
} else {
$("element").removeClass("whiteColor");
}
});
答案 1 :(得分:0)
它对我有用:
$(window).scroll(function(){
$('.aside-link').each(function(){
var fixed = $(this);
var fixed_position = $(".aside-link").offset().top;
var fixed_height = $(".aside-link").height();
var addClass = false;
$('.white').each(function(){
var toCross_position = $(this).offset().top;
var toCross_height = $(this).height();
if (fixed_position + fixed_height < toCross_position) {
//fixed.removeClass('white');
} else if (fixed_position > toCross_position + toCross_height) {
//fixed.removeClass('white');
} else {
addClass = true;
}
});
if(addClass == true){
fixed.addClass('dark');
}else{
fixed.removeClass('dark');
}
});
});
.right-aside {
position: fixed;
z-index: 10;
right: -10px;
top: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
width: 180px;
padding: 0;
font-size: 16px;
line-height: 21px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
text-transform: uppercase;
float:left;
height: fit-content;
}
.right-aside__menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.right-aside__menu ul li a {
display: block;
text-align: center;
transition: all 300ms;
color: #fff;
}
.left-aside {
position: fixed;
z-index: 10;
left: -10px;
top: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
width: fit-content;
padding: 0;
font-size: 16px;
line-height: 21px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
text-transform: uppercase;
float:left;
}
.left-aside__menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.left-aside__menu ul li a {
display: flex;
text-align: center;
transition: all 300ms;
color: #fff;
}
.left-aside__menu-item-link .uk-icon {
margin-right: 10px;
min-width: 20px;
}
.wrapper {
height: 100%;
}
.wrapper div {
height: 100vh;
}
.wrapper div:nth-child(2n+1) {
background: green;
}
.aside-link.dark {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div></div>
<div class="white" id="test"></div>
<div></div>
<div class="white"></div>
<div></div>
</div>
<aside class="right-aside">
<nav class="right-aside__menu">
<ul class="right-aside__menu-list">
<li class="right-aside__menu-item ">
<a href="" class="right-aside__menu-item-link aside-link" title="phone">
<span class="right-aside__menu-icon">
</span>
<span class="phone-vertical">+7 777 777 77 77</span>
</a>
</li>
</ul>
</nav>
</aside>
<aside class="left-aside">
<nav class="left-aside__menu">
<ul class="left-aside__menu-list">
<li class="left-aside__menu-item ">
<a href="https://www.instagram.com/" class="left-aside__menu-item-link aside-link" title="contacts">
<span uk-icon="icon: instagram"></span>
<span class="phone-vertical">instagramaccount</span>
</a>
</li>
</ul>
</nav>
</aside>