更改滚动部分的固定div的类别

Question

我有固定的div与菜单。还有一些部分。每个部分的数据属性都设置为特定的类名称（例如，data-menu =“black”）。 我想实现的是当用户滚动和具有此属性的部分在固定div下时，此div根据数据菜单属性获取类。并且在部分不再下面时删除。

这是我的小提琴：https://jsfiddle.net/pt3taagp/1/

HTML

<div class="fixed-menu"> 
    <ul> 
    <li>menu 1</li> 
    <li>menu 2</li> 
    <li>menu 3</li> 
    <li>etc.</li> 
    </ul> 
</div> 
<section data-menu="menu-black"> 
    <img src="http://placehold.it/600x600/ffffff/000000"> 
</section> 
<section data-menu="menu-white"> 
    <img src="http://placehold.it/600x600/000000/ffffff"> 
</section> 
<div>some other content</div> 

CSS

fixed-menu { 
    position:fixed; 
    top:50px; 
    left:50px; 
    width:250px; 
    background-color:red 
} 
.fixed-menu.menu-black { 
    background-color:#000; 
} 

.fixed-menu.menu-white { 
    background-color:#FFF; 
} 

默认菜单中有红色背景，但是当有数据菜单属性节=菜单白在我想要这个菜单改变背景颜色为白色等。

Answer 1

JQuery offet()方法给出了特定元素的相对位置。 Check out this fiddle.

虽然这只有在固定截面高度时才有效。

window.onscroll = function() { 
 
    myFunction() 
 
}; 
 

 
function myFunction() { 
 
    var x = $("#mainmenu").offset(); 
 
    if (x.top < 612) { 
 
    document.getElementById("mainmenu").className = "fixed-menu menu-white"; 
 
    } else if (x.top > 612) { 
 
    document.getElementById("mainmenu").className = "fixed-menu menu-black"; 
 
    }else{ 
 
    document.getElementById("mainmenu").className = "fixed-menu"; 
 
    } 
 
}

.fixed-menu { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 250px; 
 
    background-color: red 
 
} 
 
.menu-black { 
 
    background-color: #000; 
 
    color: white; 
 
} 
 
.menu-white { 
 
    background-color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div id="mainmenu" class="fixed-menu"> 
 
    <ul> 
 
     <li>menu 1</li> 
 
     <li>menu 2</li> 
 
     <li>menu 3</li> 
 
     <li>etc.</li> 
 
    </ul> 
 
    </div> 
 
    <div class="black"> 
 
    <section data-menu="menu-black"> 
 
     <img src="http://placehold.it/600x600/ffffff/000000"> 
 
    </section> 
 
    </div> 
 
    <div id="white"> 
 
    <section data-menu="menu-white"> 
 
     <img src="http://placehold.it/600x600/000000/ffffff"> 
 
    </section> 
 
    </div> 
 
    <div class="some-other-content"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    </div> 
 

 
</div>

Answer 2

感谢how get current mouse position on scroll和select all elements present at specified position的解决方案是：

• 得到在任何情况下
• 处理窗口滚动事件
• 鼠标位置滚动时，如果当前鼠标位置下的元素是一个部分：更改分类s根据数据菜单。在所有其他情况下，删除添加的类。

var xMousePos = 0; 
 
var yMousePos = 0; 
 
var lastScrolledLeft = 0; 
 
var lastScrolledTop = 0; 
 

 
function GetSectionElementsAt(x, y) { 
 
    var elements = $('section').map(function() { 
 
    var thisObj = $(this); 
 
    var offset = thisObj.offset(); 
 
    var l = offset.left; 
 
    var t = offset.top; 
 
    var h = thisObj.height(); 
 
    var w = thisObj.width(); 
 

 
    var maxx = l + w; 
 
    var maxy = t + h; 
 

 
    return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? thisObj : null; 
 
    }); 
 

 
    return elements; 
 
} 
 

 
$(document).mousemove(function(e) { 
 
    xMousePos = e.pageX; 
 
    yMousePos = e.pageY; 
 
}); 
 

 
$(window).on('scroll', function (e) { 
 
    if(lastScrolledLeft != $(document).scrollLeft()){ 
 
    xMousePos -= lastScrolledLeft; 
 
    lastScrolledLeft = $(document).scrollLeft(); 
 
    xMousePos += lastScrolledLeft; 
 
    } 
 
    if(lastScrolledTop != $(document).scrollTop()){ 
 
    yMousePos -= lastScrolledTop; 
 
    lastScrolledTop = $(document).scrollTop(); 
 
    yMousePos += lastScrolledTop; 
 
    } 
 
    var eleAtCurrentMousePos = GetSectionElementsAt(xMousePos, yMousePos); 
 
    if (eleAtCurrentMousePos.length > 0) { 
 
    var classToSet = eleAtCurrentMousePos[0].data('menu'); 
 
    if (!$('div.fixed-menu').hasClass(classToSet)) { 
 
     $('div.fixed-menu').removeClass('menu-white menu-black').addClass(classToSet); 
 
    } 
 
    } else { 
 
    $('div.fixed-menu').removeClass('menu-white menu-black'); 
 
    } 
 
});

.fixed-menu { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 250px; 
 
    background-color: red 
 
} 
 

 
.fixed-menu.menu-black { 
 
    background-color: #000; 
 
} 
 

 
.fixed-menu.menu-white { 
 
    background-color: #FFF; 
 
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<div class="fixed-menu"> 
 
    <ul> 
 
     <li>menu 1</li> 
 
     <li>menu 2</li> 
 
     <li>menu 3</li> 
 
     <li>etc.</li> 
 
    </ul> 
 
</div> 
 
<section data-menu="menu-black"> 
 
    <img src="http://placehold.it/600x600/ffffff/000000"> 
 
</section> 
 
<section data-menu="menu-white"> 
 
    <img src="http://placehold.it/600x600/000000/ffffff"> 
 
</section> 
 

 
<div class="some-other-content"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
 
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
 
     laborum. 
 
    </p> 
 
</div>