如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

最新推荐文章于 2024-04-25 15:04:32 发布
转载 最新推荐文章于 2024-04-25 15:04:32 发布 · 9.2k 阅读 · 1
文章标签：

#div #xhtml #scroll #class #html #border

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何让DIV固定在页面的某个位置而不随着滚动条随意滚动</title>
<style type="text/css">

        html,body {

            overflow:hidden;

            margin:0px;

            width:100%;

            height:100%;

        }/**把body中的所有信息给隐藏了**/

        .virtual_body {

            width:100%;

            height:100%;

            overflow-y:scroll;

            overflow-x:auto;

        }/**用一个层来模仿body**/

        .fixed_div {

            position:absolute;

            z-index:2008;
            top:0px;

            left:40px;

            width:800px;

            height:40px;

            border:1px solid red;

            background:#e5e5e5;

        }/**用定位来控制层的位置**/

    </style>

</head>

<body>

<div class="fixed_div">I am still here!</div>

<div class="virtual_body">

   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>

</body>


</html>

xiaopeng__
关注
自开发多功能Vue组件:可定义滚动速度[回到顶部/底部]图标组件的安装与使用！
Samdy_Chan的专栏
08-20 1015
本组件可用于在 Web 页面出现滚动条时，根据滚动条的位置，自动显示[回到顶部/底部]图标，可定义滚动图标的颜色，滚动动效时间和速度等参数设置，可拖拽和临时隐藏图标等功能。 本组件采用 Vite5+Vue3+TypeScript(TS)开发，支持组件标签属性TS类型提示……
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
程序人生
11-17 6121
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
固定div位置，不随滚动条上下动
AinUser的博客
12-30 8044
1、position div中的style属性中的一个关键字，表明了该div所在的位置以及位置本身的属性。 position有四个值可选：static，absolute，fixed，relative。 若要使得div相对于浏览器窗口固定，即不随滚动条的变化而上下移动，可以用fixed属性。最近比较忙，抽不出时间来具体的写详细用法，具体的用法见：http://blog.csdn.n
【jQuery笔记Part2】01-jQuery显示&隐藏&切换动画&侧边广告案例
萌宅鹿的技术小屋
08-25 566
01-jQuery动画jQuery动画动画分类HTML DOM position 属性定义和用法显示 show(毫秒, 完成回调函数)隐藏 hide(毫秒, 完成回调函数)切换 toggle(毫秒, 完成回调函数)案例：两侧浮动广告显示或者隐藏控制 jQuery动画 通过 jQuery 动画方法，能够很轻松地为网页添加非常精彩的视觉效果 给用户一种全新体验。 动画分类 显示、隐藏 滑动、卷动 淡...
div固定位置，不随滚动条滚动
飓风王洛林的专栏
02-06 567
Html代码 html> head> title>div固定位置，不随滚动条滚动title> style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; height:100%; } .virtual_body { width:100%; height:100%; over
解决Vue页面固定滚动位置的处理办法
08-30
浏览器的滚动位置恢复行为可以分为两个步骤：在hashchange事件触发时，浏览器会拿到当前页面的document.body.scrollTop值，并与自己存储的滚动条位置进行比较，取最小的值，设置成当前的document.body.scrollTop值。...
<script setup lang="ts"> import { ref, onMounted } from 'vue'; import { NLayout, NLayoutHeader, NLayoutContent, NLayoutFooter, NIcon, NInput, NInputGroup, NButton, NUpload, NCode, NScrollbar, NEmpty, NConfigProvider // 引入配置提供器 } from 'naive-ui'; import { SearchOutline as SearchIcon } from '@vicons/ionicons5'; import hljs from 'highlight.js/lib/core'; import python from 'highlight.js/lib/languages/python'; import 'highlight.js/styles/github.css'; // 导入github主题 // 注册语言 hljs.registerLanguage('python', python); // 可以在这里注册更多语言，如javascript、typescript等 const searchQuery = ref(''); const fileContent = ref(''); const fileName = ref(''); // 根据文件后缀获取语言类型 const getLanguageByExtension = (filename: string) => { const extension = filename.split('.').pop()?.toLowerCase() || ''; const langMap: Record<string, string> = { 'js': 'javascript', 'jsx': 'javascript', 'ts': 'typescript', 'tsx': 'typescript', 'html': 'html', 'css': 'css', 'json': 'json', 'vue': 'html', 'py': 'python', 'java': 'java', 'c': 'c', 'cpp': 'cpp', 'cs': 'csharp', 'php': 'php', 'rb': 'ruby', 'go': 'go', 'rs': 'rust', 'swift': 'swift', 'kt': 'kotlin', 'sh': 'shell', 'md': 'markdown', 'yaml': 'yaml', 'yml': 'yaml', 'xml': 'xml' }; return langMap[extension] || 'text'; }; const handleFileChange = ({ file }: any) => { const selectedFile = file.file as File; if (selectedFile) { if (!selectedFile.type.startsWith('text/') && !selectedFile.name.match(/\.(js|jsx|ts|tsx|html|css|json|vue|py|java|c|cpp|cs|php|rb|go|rs|swift|kt|sh|md|yaml|yml|xml)$/i)) { window.alert('请选择文本或代码文件'); return; } fileName.value = selectedFile.name; searchQuery.value = selectedFile.name; const reader = new FileReader(); reader.onload = (e: ProgressEvent<FileReader>) => { if (e.target?.result) { fileContent.value = e.target.result as string; } }; reader.readAsText(selectedFile); } }; const handleNext = () => { console.log('下一步操作', fileContent.value); window.alert('进入下一步操作！'); }; </script> <template> <!-- 在n-config-provider中注入hljs --> <n-config-provider :hljs="hljs"> <n-layout class="container"> <!-- 顶部图标 --> <n-layout-header class="header"> <n-icon size="48" color="#2080f0"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> </svg> </n-icon> <h1 class="title">自动化测试平台</h1> </n-layout-header> <!-- 搜索区域 --> <n-layout-content class="search-section"> <n-input-group> <div class="source-label">Source：</div> <n-input v-model="searchQuery" placeholder="输入文件路径或选择文件" readonly size="large" /> <n-upload action="" :show-file-list="false" @change="handleFileChange" > <n-button type="primary" size="large"> <template #icon> <n-icon><search-icon /></n-icon> </template> 选择文件 </n-button> </n-upload> </n-input-group> </n-layout-content> <n-layout-content class="content-display"> <n-scrollbar style="height: 100%"> <div v-if="fileContent"> <!-- 使用n-code组件，并设置show-line-numbers和word-wrap --> <n-code :code="fileContent" :language="getLanguageByExtension(fileName)" show-line-numbers word-wrap /> </div> <n-empty v-else description="未选择文件" /> </n-scrollbar> </n-layout-content> <!-- 底部操作区域 --> <n-layout-footer class="footer"> <n-button type="primary" size="large" :disabled="!fileContent" @click="handleNext" class="action-button" > 下一步 </n-button> </n-layout-footer> </n-layout> </n-config-provider> </template> <style scoped> .container { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .header { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 15px 0; } .title { font-size: 24px; font-weight: bold; margin-top: 8px; color: #333; } .search-section { flex: 0 0 auto; padding: 10px 0 20px; width: 100%; } .n-input-group { display: flex; align-items: center; width: 100%; padding: 0 20px; box-sizing: border-box; } .source-label { font-size: 16px; font-weight: bold; color: #333; white-space: nowrap; margin-right: 12px; } .content-display { flex: 1; min-height: 0; padding: 0 20px; overflow: auto; /* 单一滚动条控制 */ } .code-container { background: #f5f5f5; border-radius: 4px; padding: 15px; max-height: calc(100vh - 250px); /* 动态高度计算 */ } /* 覆盖n-code的样式，确保背景色一致 */ :deep(.n-code) { background: #f5f5f5 !important; padding: 15px; font-size: 15px; line-height: 1.5; max-height: 100%; overflow: auto; } :deep(.n-code-line) { white-space: pre-wrap !important; word-break: break-word !important; } .footer { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 15px 20px; width: 100%; box-sizing: border-box; } .action-button { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 768px) { .search-section, .content-display, .footer { padding-left: 10px; padding-right: 10px; } .n-input-group { flex-direction: column; align-items: flex-start; } .source-label { margin-bottom: 8px; margin-right: 0; } .n-upload { margin-top: 10px; width: 100%; } .n-button { width: 100%; } .action-button { width: 100%; margin-top: 10px; } } </style>我修改样式和布局，这个页面我在鼠标往下滚动的滚动条（因为父组件已经有了）如果这个页面再来一黑色的滚动条，特别丑，所以给我修改，使其屏幕上只有一个滚动条
最新发布
10-18
这样，我们只需要确保内部的可滚动组件（如表格）不使用自身的滚动条（即不设置固定高度，或者不使用flex-height），而是让整个页面滚动。 然而，如果表格数据量很大，我们可能还是希望表格内部滚动（比如表头固定...
div固定在浏览器的最上方，不随滚动条滚动
weixin_34376562的博客
12-27 358
1 #topDIV { 2 position: fixed; 3 top: 0; 4 z-index: 10000; 5 width: 100%; 6 height: 35px; 7 border-bottom: 1px solid #eee; 8 background-color: #f5f5f5; 9 } 把d...
div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动
06-19
div跟随固定在浏览器左边，上下拉动浏览器滚动条时div固定在左边，横向拉动滚动条时DIV会跟随主体而改变位置。
div不随滚动条的移动而改变位置
01-12
div固定在屏幕的一个位置，不随滚动条的拖动而改变位置
固定DIV不随滚动条滚动
诺言永远依恋小柴、、、
07-22 1740
【webQD】☆★之固定DIV不随滚动条滚动     在项目开发中，有的页面的某些按钮，我们是不想让他跟着滚动条滚动的，比如，添加页面，有很长的内容添加，在往下滚动添加的过程中，我们始终想看到保存按钮。OK！      1 2 3 4 5 6 7 8 9 10 11 12
css 将div固定在页面顶部不随页面滑动
于坤
04-25 8590
为了将一个div设置为固定在页面顶部，不随页面滚动，可以使用几种不同的 CSS 技术来实现。
固定div位置，不随滚动条滚动
web开发
08-07 2302
我们在html页面中的某处，可能要固定div的位置，下面我们编写js来控制 1、只能在初始页面的可视区域固定div 编写js代码： jQuery.fn.floatdiv=function(location){ //判断浏览器版本 var isIE6=false; var Sys = {}; var ua = navigator.userAgent.toLowerCase(...
利用jquery实现滚动条下拉后固定DIV位置的案例分析
在上述代码中，当用户滚动页面并且滚动位置超过了指定的`<div>`元素的顶部位置时，会将`<div>`的CSS属性`position`设置为`fixed`，这样`<div>`就会固定在浏览器窗口的顶部。如果滚动位置没有超过`<div>`的顶部位置，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值