Bootstrap4滚动监听实例 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

Bootstrap4 滚动监听

打开边栏(ESC) 关闭边栏(ESC)

如果需要实现居顶部一定距离的时候，就开始滚动，可以用data-offset=“”实现，默认值10，描述：计算滚动位置时，从顶部开始的计算的像偏移距离。

举例：

<body style='position: relative; padding-bottom:500px;' data-spy="scroll" data-target="#navbar-example3" data-offset="100">

实例一：官方

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>滚动监听</title>
<link rel="stylesheet" href="bootstrap-4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/media.css">
</head>
<body>
<div class="container">
	<p><code >.bd-example</code>顶部有一条线，是因为css里面只设定了顶部边框</p>
	<div class="bd-example">
		<div class="row">
      <div class="col-4">
        <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column"> <a class="navbar-brand" href="#">Navbar</a>
          <nav class="nav nav-pills flex-column"> <a class="nav-link active" href="#item-1">Item 1</a>
            <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a> </nav>
            <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link" href="#item-3">Item 3</a>
            <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a> </nav>
          </nav>
        </nav>
      </div>
      <div class="col-8">
        <div data-spy="scroll" data-target="#navbar-example3" data-offset="0" class="scrollspy-example-2">
          <h4 id="item-1">Item 1</h4>
          <p>....</p>
          <h5 id="item-1-1">Item 1-1</h5>
          <p>....</p>
          <h5 id="item-1-2">Item 2-2</h5>
          <p>....</p>
          <h4 id="item-2">Item 2</h4>
          <p>....</p>
          <h4 id="item-3">Item 3</h4>
         <p>....</p>
          <h5 id="item-3-1">Item 3-1</h5>
          <p>....</p>
          <h5 id="item-3-2">Item 3-2</h5>
          <p>....</p>
        </div>
      </div>
    </div>
	</div>
	
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap-4.4.1/js/bootstrap.min.js" ></script>
</body>
</html>

相关css

.bd-example {
    position: relative;
    padding: 1rem;
    margin: 1rem -15px;
    border: solid #f7f7f9;
    border-width: .2rem 0 0;
}
.scrollspy-example-2 {
    position: relative;
    height: 350px;
    overflow: auto;
}

实例二：悬浮滚动监听

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>悬浮滚动监听</title>
<link rel="stylesheet" href="bootstrap-4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/media.css">
</head>
<body style='position: relative; padding-bottom:900px;' data-spy="scroll" data-target="#navbar-example3">
<nav id="navbar-example3" class="navbar navbar-light flex-column navbar_ttit"> 
	<a class="navbar-brand" href="#">栅格系统</a>
	<nav class="nav flex-column"> 
		<a class="nav-link" href="#item-1">一、栅格选项</a>		
		<a class="nav-link" href="#item-2">二、自动布局列</a>
		<nav class="nav flex-column"> 
			<a class="nav-link ml-3" href="#item-2-1">1，等宽布局</a> 
			<a class="nav-link ml-3" href="#item-2-2">2，五个等宽的列</a>		
		</nav>
		
	</nav>
</nav>
<div class="container container_ttit">
	<h2 class="text-center">栅格系统</h2>
	
	<h3 class="h3_ttit" id="item-1">一、栅格选项</h3>
	...
	
	<h3 class="h3_ttit" id="item-2">二、自动布局列</h3>
	
	<h4 id="item-2-1">1，等宽布局</h4>
	<div class="row row_ttit">
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
	</div>
	
	<h4 id="item-2-2">2，五个等宽的列，列之间没有间隔</h4>
	<p><code>.row</code>上带有<code>margin-left: -15px;margin-right: -15px;</code>属性，你可以在<code>.row</code>上上定义<code>.no-gutters</code>属性，从而消除这个属性，使页面不会<strong>额外宽出30px</strong>，即<code>&lt;div class="row no-gutters"...</code>。</p>
	<div class="row row_ttit no-gutters">
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
		<div class="col">
			三分之一空间占位
		</div>
	</div>
	
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap-4.4.1/js/bootstrap.min.js" ></script>
</body>
</html>

bootstrap4中使用Font Awesome图标

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

bootstrap4中使用Font Awesome图标

Bootstrap4,:after,display: fle...