在網頁設計中，常常會出現頁面滾動時，右側固定導航菜單不隨之滾動的效果，這也是提高用戶體驗的一種方法。通過JS和CSS結合實現固定菜單非常簡單易懂，下面我們就來介紹具體實現方法。

// JS代碼
window.onscroll = function() {
var nav = document.getElementById('nav');
if(window.pageYOffset >100) { // 假設滾動超過100px
nav.style.position = 'fixed';
nav.style.top = '0';
} else {
nav.style.position = 'static';
}
}

以上代碼中，我們為窗口添加了onscroll事件，當頁面滾動時，該事件觸發，然后通過getElementById方法獲得導航菜單的dom節點，在滾動距離超過100px時通過CSS改變其position屬性實現固定菜單。

/* CSS代碼 */
#nav {
position: static;
width: 200px;
}

在CSS中，我們設置了初始狀態為static，當JS中的操作生效時才改變其值為fixed，同時設置寬度以保證導航菜單布局正確。

通過以上JS和CSS的組合，我們就可以很方便地實現固定菜單效果，為用戶提供更好的交互體驗。