Javascript 侧边滚动顶部的标题

在下面的页面中，我希望标题及其下方的菜单具有100%的全宽，这意味着我希望侧边滚动显示在导航栏下方

在这个页面中：侧边滚动将标题和它下面的菜单向左推了它的宽度，因此它不是我想要的。你能帮我修改代码，使标题和菜单保持100%的屏幕宽度吗

在这一页中：我尝试了“溢出：隐藏”的正文和“溢出-y:scroll；”的标题下的内容和标题下的菜单，但它没有工作

在下面的页面中，我介绍了一个侧面滚动，显示在标题下方和标题下方的菜单：

在上面的这个页面上，我已经将我的内容放在fullpage.js属性中，即在sections和slides（）中滚动，但是我无法操作内容。也就是说，标题下的菜单不再工作，也就是说，它不会过滤放在fullpage.js节中的MixItUp内容的图像。事实上，有时它可以工作，但它是超级随机的，我觉得代码中有一些重叠，我无法发现（我感觉这是一个javascript问题）。如果你能帮我解决这个问题，那就太好了，因为我真的很喜欢fullpage.js部分中的滚动图形，它类似于手机滚动，没有标准桌面浏览器侧滚动那么宽

下面是我取得的一些进展，但仍然不太理想

备选案文一： -在这里，我可以在fullpage.js中滚动，但是mixitup插件不起作用（即mixitup插件的菜单不会过滤图像）。下面是我编写的代码：

     afterRender:  $(function () {
     var filterList = {init: function () {
     // MixItUp plugin
     // http://mixitup.io
     $('#portfoliolist').mixItUp({
     selectors: {
     target: '.portfolio',
     filter: '.filter'
     },
     load: {
     filter: '.architecture, .interiordesign, .urbandesign, .development, 
     .art, .branding, .raddar' // show app tab on first load
     }    
     });
     }
     };
     // Run the show!
     filterList.init();
     }),

备选案文二： -在这里mixitup插件工作，但没有滚动，所以我不能看到所有的图像。我更改了代码末尾的“$”和“（“在代码开头和”）”：

     afterRender:  function () {
     var filterList = {init: function () {
     // MixItUp plugin
     // http://mixitup.io
     $('#portfoliolist').mixItUp({
     selectors: {
     target: '.portfolio',
     filter: '.filter'
     },
     load: {
     filter: '.architecture, .interiordesign, .urbandesign, .development, 
     .art, .branding, .raddar' // show app tab on first load
     }    
     });
     }
     };
     // Run the show!
     filterList.init();
     },

---

我已经快速查看了MixItUp，但是我没有时间熟悉它。我觉得这是一个非常实用的工具

但我认为，仅使用基本HTML编码时，您的问题要简单得多：

html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
溢出：隐藏；
}
#标题{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：45px；
背景色：#363636；
}
#菜单{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：48px；
背景色：#D8D8D8；
}
#内容{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：计算（100%-93px）；
溢出x：隐藏；
溢出y：滚动；
}
#容器{
位置：相对位置；
顶部：10px；
左：10px；
右：10px；
宽度：100%；
高度：自动；
最小高度：10px；
}
.展示项目{
位置：相对位置；
利润率：10px；
宽度：200px；
高度：200px；
边框：1px实心#000000；
浮动：左；
}

测试卷轴

请提供示例代码和/或代码沙盒链接，而不仅仅是将我们链接到您的项目。因此，我们可以帮助您解决特定问题，而不是调试您的代码。您好，非常感谢您的反馈！我对上面的描述做了一些修改，即将MixItUp插件代码与fullpage.js代码放在一起（使用fullpage.js的“after Render”回调。但是我仍然无法正常运行。下面请查看代码的主要部分，我认为您可以给我反馈：谢谢，但是您共享的代码不允许从灰色菜单（标题下方）过滤图像。如果您点击链接，您会看到，一旦您点击“品牌”即可在灰色子菜单中，图像将被洗牌，然后如果你点击架构，你将得到一个不同的洗牌，代表与架构相关的项目。当然，上面的代码不会提供进一步的功能，你将尝试完成类似“点击菜单过滤选择项”的功能.我的代码只是一个页面结构，它解决了您在问题中提出的问题，“您希望滚动条仅显示在标题和菜单栏下”。您需要的任何额外功能都是您应该根据结构添加的，也就是说，如果您正在查找页面上的滚动条，就像我在这里创建的滚动条一样。谢谢您的帮助，但我想我也需要特定插件的帮助，因为您描述的滚动无法与插件一起工作