セクションオーバースクロール時の固定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のおかげで解決策は次のとおりです。

• スクロールしながら場合は、いずれの場合
• でのマウスの位置は、ウィンドウのスクロールイベント
• を処理します現在のマウス位置の下にある要素はセクションです：clasを変更する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>