需要一些建议来创建一个浮动菜单，它的行为与apple website shopping cart上使用的非常相似。我见过一些脚本做类似的事情（我们也试过一个），但它们往往“滞后”于移动，而苹果的版本给人的印象是静止的。jQuery解决方案会更好。
z0qdvdin1#
嗯，看起来他们正在从相对定位切换到固定定位。比大多数人做的效果更好，那就是简单地随着窗口向下滚动更多而向下滚动更多。您可以按照the following link中的操作检测窗口的向下滚动程度。
06odsfpq2#
当div的y位置等于当前窗口视图的顶部时，将其设为固定位置。您必须使用逻辑来确保它在向上滚动后回到非固定位置，但这应该是微不足道的。
2q5ifsrm3#
这里有一个叫做scroll-follow的plugin插件，它会很有帮助，本质上你用ul定义了一个DIV作为你的菜单选项，这个插件允许你设置速度，外观和一个切换开关。
yqyhoc1h4#
下面是浮动菜单的工作示例。请仔细阅读并添加评论（如果有）。
var isMouseDown, initX, initY, height = draggable.offsetHeight, width = draggable.offsetWidth; draggable.addEventListener('mousedown', function (e) { isMouseDown = true; document.body.classList.add('no-select'); initX = e.offsetX + 10; initY = e.offsetY + 10; }) document.addEventListener('mousemove', function (e) { if (isMouseDown) { var cx = e.clientX - initX, cy = e.clientY - initY; if (cx < 0) { cx = 0; } if (cy < 0) { cy = 0; } if (window.innerWidth - e.clientX + initX < width) { cx = window.innerWidth - width; } if (e.clientY > window.innerHeight - height + initY) { cy = window.innerHeight - height; } draggable.style.left = cx + 'px'; draggable.style.top = cy + 'px'; } }) draggable.addEventListener('mouseup', function () { isMouseDown = false; document.body.classList.remove('no-select'); })
:root{ --dynamic-color: #ffffff; --dynamic-text-color: #F45B3C; } body{ height: 100vh; } #draggable { background: var(--dynamic-color); display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 80px; height: 500px; border-radius: 80px; z-index: 9999999; } #draggable #mydraggable { cursor: move; touch-action: none; user-select: none; } #draggable #mydraggable:hover { cursor: grab; } #draggable #mydraggable:active { cursor: grabbing; } #draggable > ul { height: 100%; } #draggable > ul a { border-radius: 40px; color: var(--dynamic-text-color); opacity: 0.6; } #draggable > ul a:hover, #draggable > ul a:active, #draggable > ul a.active { background-color: var(--dynamic-text-color); color: var(--bs-white); opacity: 1; } #draggable > ul a::after { display: none; } #draggable > ul .dropdown-menu { transform: translate(40px, 0px) !important; } .no-select { user-select: none; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <!-- Credits --> <div class="d-flex align-items-start flex-column text-center justify-content-center py-5 h-100"> <div class="w-100"> Check this tool in full screen for the best results. </div> <div class="mt-auto w-100"> Credits: <a href="https://thememakker.com/">Thememakker Infotech LLP</a> </div> </div> <!-- End Credits --> <!-- Floating Sidebar --> <div id="draggable" class="no-select p-3 shadow"> <div id="mydraggable"> <svg xmlns="http://www.w3.org/2000/svg" width="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z" /> </svg> </div> <!-- start: menu link --> <ul class="list-unstyled mb-0 d-flex flex-column align-items-center pt-3 mt-3 border-top"> <li class="mb-2"> <a class="d-flex p-2 active" href="https://www.thememakker.com/"> <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" /> </svg> </a> </li> <li class="mb-2"> <a class="d-flex p-2" href="https://www.wrraptheme.com/templates/luno/marketing/"> <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z" /> <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" /> </svg> </a> </li> <li class="mb-2"> <a class="d-flex p-2" href="#menu_pages" data-bs-toggle="offcanvas" role="button"> <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"> </path> <path class="fill-secondary" d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path> </svg> </a> </li> <li class="mb-2"> <a class="d-flex p-2" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M5.33801 1.59C4.38559 1.85248 3.43965 2.1379 2.50101 2.446C2.41529 2.47376 2.3391 2.52504 2.28111 2.59399C2.22312 2.66295 2.18567 2.7468 2.17301 2.836C1.61901 6.993 2.89901 10.026 4.42601 12.024C5.07252 12.8784 5.84341 13.6311 6.71301 14.257C7.05901 14.501 7.36501 14.677 7.60601 14.79C7.72601 14.847 7.82401 14.885 7.89901 14.908C7.93181 14.9195 7.96562 14.9279 8.00001 14.933C8.03398 14.9275 8.06743 14.9191 8.10001 14.908C8.17601 14.885 8.27401 14.847 8.39401 14.79C8.63401 14.677 8.94101 14.5 9.28701 14.257C10.1566 13.6311 10.9275 12.8784 11.574 12.024C13.101 10.027 14.381 6.993 13.827 2.836C13.8145 2.74676 13.777 2.66285 13.719 2.59388C13.661 2.52491 13.5848 2.47366 13.499 2.446C12.848 2.233 11.749 1.886 10.662 1.591C9.55201 1.29 8.53101 1.067 8.00001 1.067C7.47001 1.067 6.44801 1.289 5.33801 1.59ZM5.07201 0.56C6.15701 0.265 7.31001 0 8.00001 0C8.69001 0 9.84301 0.265 10.928 0.56C12.038 0.86 13.157 1.215 13.815 1.43C14.0901 1.52085 14.334 1.68747 14.5187 1.9107C14.7034 2.13394 14.8213 2.40474 14.859 2.692C15.455 7.169 14.072 10.487 12.394 12.682C11.6824 13.621 10.834 14.4479 9.87701 15.135C9.5461 15.3728 9.19549 15.5819 8.82901 15.76C8.54901 15.892 8.24801 16 8.00001 16C7.75201 16 7.45201 15.892 7.17101 15.76C6.80452 15.5819 6.45391 15.3728 6.12301 15.135C5.16603 14.4478 4.31759 13.621 3.60601 12.682C1.92801 10.487 0.545005 7.169 1.14101 2.692C1.17869 2.40474 1.29665 2.13394 1.48132 1.9107C1.666 1.68747 1.9099 1.52085 2.18501 1.43C3.1402 1.11681 4.10281 0.826725 5.07201 0.56Z"> </path> <path class="fill-secondary" d="M8 5.38462C8.21217 5.38462 8.41566 5.46566 8.56569 5.60992C8.71571 5.75418 8.8 5.94983 8.8 6.15385V6.53846H7.2V6.15385C7.2 5.94983 7.28429 5.75418 7.43431 5.60992C7.58434 5.46566 7.78783 5.38462 8 5.38462ZM9.2 6.53846V6.15385C9.2 5.84783 9.07357 5.55434 8.84853 5.33795C8.62348 5.12157 8.31826 5 8 5C7.68174 5 7.37652 5.12157 7.15147 5.33795C6.92643 5.55434 6.8 5.84783 6.8 6.15385V6.53846C6.58783 6.53846 6.38434 6.61951 6.23431 6.76376C6.08429 6.90802 6 7.10368 6 7.30769V9.23077C6 9.43478 6.08429 9.63044 6.23431 9.7747C6.38434 9.91896 6.58783 10 6.8 10H9.2C9.41217 10 9.61566 9.91896 9.76569 9.7747C9.91571 9.63044 10 9.43478 10 9.23077V7.30769C10 7.10368 9.91571 6.90802 9.76569 6.76376C9.61566 6.61951 9.41217 6.53846 9.2 6.53846Z"> </path> </svg> </a> </li> <li class="mb-2"> <a class="d-flex p-2" href="https://www.thememakker.com/all-templates/" > <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path class="fill-secondary" fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"> </path> <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"> </path> <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"> </path> </svg> </a> </li> <li class="mb-auto"> <div class="dropdown"> <a class="d-flex p-2 dropdown-toggle" href="#" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path class="fill-secondary" d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"> </path> <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"> </path> <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"> </path> </svg> </a> <ul class="dropdown-menu p-2 shadow border-0"> <li><a class="dropdown-item" href="https://www.thememakker.com/ui-ux-design/" >UI UX Design</a></li> <li><a class="dropdown-item" href="https://www.thememakker.com/web-development/" >Web Development</a></li> <li><a class="dropdown-item" href="https://www.thememakker.com/mobile-app-development/" >Mobile Development</a></li> </ul> </div> </li> <li class="mb-2"> <a class="d-flex p-2" href="https://dribbble.com/thememakker" > <svg xmlns="http://www.w3.org/2000/svg" width="20" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8zm5.284 3.688a6.802 6.802 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A6.95 6.95 0 0 1 8 1.18zm-2.907.642A43.123 43.123 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.865 6.865 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.817 6.817 0 0 1-1.752-4.564zM8 14.837a6.785 6.785 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.246 28.246 0 0 1 1.457 5.18A6.722 6.722 0 0 1 8 14.837zm3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.774 6.774 0 0 1-2.924 4.573z" /> </svg> </a> </li> <li> <a class="d-flex p-2" href="https://themeforest.net/user/wrraptheme/portfolio" > <svg width="17" height="17" viewBox="0 0 15 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M12.7861 0.130831C12.2842 -0.145667 10.846 0.0254157 9.11824 0.555946C6.0944 2.60779 3.54282 5.63141 3.36471 10.4857C3.33222 10.602 3.03401 10.4701 2.97483 10.4338C2.15854 8.88026 1.8348 7.24374 2.5165 4.88371C2.64356 4.67346 2.22816 4.41482 2.15331 4.48913C2.00363 4.63775 1.37995 5.29788 0.965709 6.01102C-1.08809 9.54846 0.255001 14.0807 3.84799 16.0646C7.4404 18.0513 11.9767 16.7697 13.9772 13.2017C16.2915 9.08418 14.1425 0.883135 12.7861 0.130831Z"> </path> </svg> </a> </li> </ul> <!-- start: offcanvas menu --> <div class="offcanvas offcanvas-end" tabindex="-1" id="menu_pages"> <div class="offcanvas-header"> <h5 class="offcanvas-title">ThemeMakker</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <h5 class="mb-3">Looking for a top-notch digital web agency that specializes in front-end design and development using React, Angular, Laravel, Vue.js, and other cutting-edge frameworks? Look no further than ThemeMakker!</h5> <p class="lead">Our team of experienced developers and designers offers a wide range of front-end design and development services, including:</p> <ul class="lh-lg"> <li>Website design and development</li> <li>Application development</li> <li>Front-end optimization</li> <li>Framework selection and implementation</li> <li>Maintenance and support</li> </ul> <p>At ThemeMakker, we're dedicated to delivering stunning, functional websites and applications that engage users and drive results. Contact us today to learn more about how we can help take your project to the next level!</p> <div class="d-flex mt-4"> <a class="btn w-100 me-1 btn-primary" href="https://www.thememakker.com/contact/" role="button">Contact Us</a> <a class="btn w-100 ms-1 btn-danger" href="https://www.thememakker.com/hire-us/" role="button">Hire Us</a> </div> </div> </div> </div> <!-- End Floating Sidebar -->
4条答案
按热度按时间z0qdvdin1#
嗯，看起来他们正在从相对定位切换到固定定位。比大多数人做的效果更好，那就是简单地随着窗口向下滚动更多而向下滚动更多。
您可以按照the following link中的操作检测窗口的向下滚动程度。
06odsfpq2#
当div的y位置等于当前窗口视图的顶部时，将其设为固定位置。您必须使用逻辑来确保它在向上滚动后回到非固定位置，但这应该是微不足道的。
2q5ifsrm3#
这里有一个叫做scroll-follow的plugin插件，它会很有帮助，本质上你用ul定义了一个DIV作为你的菜单选项，这个插件允许你设置速度，外观和一个切换开关。
yqyhoc1h4#
下面是浮动菜单的工作示例。
请仔细阅读并添加评论（如果有）。