随着页面滚动，底部的导航条也随着滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
body{
overflow:hidden;
}
.main{
height:100%;
width:100%;
overflow:auto;
overflow-x:hidden;
position:absolute;
border:1px solid red;
left:0px;
top:0px;
}
.flowDiv{
width:800px;
height:50px;
border:1px solid red;
margin:0 auto ;
}
.toolbar{
height:50px;
border:1px solid green;
position:absolute;
bottom:0px;
left:0px;
right:16px;
}
</style>
<BODY>
<div class="main">
<div style="height:1500px;width:800px;border:1px solid blue;margin:0 auto;word-break:break-all;overflow:hidden ">
内容：fwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwdddddddddddddddddddddddddddddddddddddwwwwwwwwwwwwwwwwwwwwwwwwwwwdddddddddddddddddddddhhhhhhhhhhhhhhhwwwwww
</div>
</div>
<div class="toolbar">
<div class="flowDiv" style="text-align:center">
不变的导航
</div>
</div>
</BODY>
</HTML>
相关推荐
**jQuery全屏页面滚动导航切换效果详解** 在网页设计中，全屏页面滚动导航是一种流行的交互方式，它能提供沉浸式的用户体验，使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果，可以提升网站的...
标题中的“jquery随页面滚动最终固定顶部的导航条插件”指的是一个基于jQuery的JavaScript插件，该插件实现了一种交互效果：当用户在网页上滚动时，导航条会从页面底部开始移动，随着页面的向下滚动逐渐靠近顶部，...
滚动导航条是一种常见的特效，它会在页面滚动时动态改变位置或显示状态，增强用户体验。"javascript经典特效---滚动导航条2.rar"是一个关于如何使用JavaScript实现这种效果的资源包，主要关注的是JavaScript在创建...
JavaScript经典特效——文字滚动导航条是一种常见的网页交互设计，它能吸引用户注意力并提供便捷的导航体验。在网页设计中，这种效果常用于顶部菜单、新闻更新或广告展示等区域。本文将深入探讨如何利用JavaScript...
随着页面内容的增多，为了保持页面的简洁性和优化用户体验，设计师有时会将导航条设置为隐藏，仅当用户向下滚动页面时才显示出来。这种效果可以通过JavaScript库jQuery轻松实现。本文将详细介绍如何使用jQuery来实现...
【标题】"简单JS随滚动条滚动导航"所涉及的知识点主要集中在JavaScript的事件监听、DOM操作以及CSS样式实现上。这种类型的导航栏通常用于网页设计中，它能随着用户滚动页面而改变位置，始终保持在可见区域，为用户...
总之，通过CSS的`position: fixed`和JavaScript或jQuery的滚动事件监听，我们可以实现导航条在页面滚动时始终保持在视口顶部，从而提高用户的浏览体验。这是一项常见的网页设计技巧，尤其适用于内容丰富的长页面。...
《jQuery百度百科页面滚动导航代码解析》 在Web开发领域，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本篇文章中，我们将深入探讨“jQuery百度百科页面滚动...
本文将详细解析“简单的jQuery页面滚动导航切换代码”的实现原理和应用，旨在为IT从业者提供一个实用的网页开发技巧。 首先，jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作等...
在这个名为"滚动的导航条.rar"的压缩包中，我们关注的是一个使用JavaScript实现的网页元素——滚动导航条。这个特效使得导航条在用户滚动页面时能够保持在屏幕顶部，从而提供持续的导航功能，提升用户体验。 首先，...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来增强用户体验，其中之一就是页面滚动时的浮动导航切换效果。本压缩包"jQuery页面滚动浮动导航切换代码.zip"提供了一种实现这种效果的解决方案，特别适用于那些...
"jQuery固定导航随页面滚动颜色渐变"这个主题涉及到的技术点主要是利用jQuery库来实现导航栏随着页面滚动而动态改变颜色的效果，为用户带来更丰富的视觉体验。 首先，我们需要了解jQuery库。jQuery是一个快速、简洁...
通过以上技术，我们可以创建一个在页面滚动时始终置顶的导航条，提高用户的浏览体验。在实际项目中，可能还需要结合其他前端框架（如Bootstrap、AngularJS等）或者CSS预处理器（如Sass、Less）来进一步优化代码结构...
在网页设计中，文字滚动导航条是一种常见的交互元素，它能有效地展示大量链接或信息，同时保持页面的整洁。这种导航条通常出现在网页顶部，显示主要的页面分类或功能，当用户滚动鼠标时，文字会沿着设定的方向滚动，...
本文将深入探讨如何使用jQuery实现单页面滚动时，点击顶部导航条，页面能够自动滚动到预设的描点位置。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、...
在这个“ViewPager_HorizontalScrollView滚动导航条”案例中，我们将探讨如何将这两种组件结合起来，创建一个动态的、交互式的滚动导航条。 首先，`ViewPager` 是Android SDK中的一个强大的组件，主要用于展示多个...
在网页设计中，导航条是用户浏览网站时的重要指引，尤其在...此外，为了优化用户体验，还可以添加一些附加功能，如滚动监听，当页面滚动到特定区域时，高亮对应的导航条链接，提示用户当前浏览的内容与哪个导航项对应。
在压缩包中的“定位页面内容位置及滚动条滚动改变导航元素对应状态”文件中，应该包含了实现这些功能的完整代码。通过分析和学习这个文件，你可以更好地理解如何将这些理论知识应用到实践中。 总之，掌握JavaScript...
"导航滚动"这一概念通常涉及到两种主要技术：一是页面内的滚动条设计，二是基于视图的滚动控制。 一、页面内滚动条设计 1. **基本滚动条**：在大多数操作系统和浏览器中，滚动条由两个主要部分组成——水平滚动条...