Bootstrap 4，根据我们在第一列上滚动的位置，更改第二列的内容

本文介绍了Bootstrap 4，根据我们在第一列上滚动的位置，更改第二列的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我在一行中有2列，一列用于主要内容，第二列用于该主要内容的代码预览，我想做的是，第二列将在滚动后切换我设置为的内容直到第一栏的特定部分.此代码中的第一列是内容应该位于的白色列，而暗列是应在其中显示代码的位置，具体取决于您在白色列中的位置

I have 2 columns in one row, one is for main content and second one next to it is for code preview for that main content, what I want to do is that second column would switch content that I set to once I scroll down to specific part of column one. The column one in this code is the white one where the content is suppsed to be, and the dark column is where the code should be displayed dependt on where are you on white column

编辑代码:

HTML:

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script defer src="use.fontawesome/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="use.fontawesome/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>  <link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  <link href="css/style.css" rel="stylesheet"> <title>Hello, world!</title> </head> <body>   <script src="code.jquery/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="container-flex">  <nav class="navbar navbar-expand-lg navbar-light bg-dark"> <a class="navbar-brand" href="index.html">IP Intelligence</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="input/input.html">Input</a> </li> <li class="nav-item"> <a class="nav-link" href="output/output.html">Output</a> </li> <li class="nav-item"> <a class="nav-link" href="flags/flags.html">Flags</a> </li> <li class="nav-item"> <a class="nav-link" href="flags/flags.html#error">Error Codes</a> </li> <li class="nav-item"> <a class="nav-link" href="contact/contact.html">Contact</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </div> <div id="wrapper"> <div class="container-fluid"> <div class="row justify-content-between">  <nav class="" id="sidebar"> <ul class="list-unstyled components"> <li class="active"> <a href="index.html">Home</a> </li> <li> <a href="#inputSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Input</a> <ul class="collapse list-unstyled" id="inputSubmenu"> <li> <a href="input/input.html">Input</a> </li> <li> <a href="input/input.html">Optional Input Settings</a> </li> </ul> </li> <li> <a href="#outputSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Output</a> <ul class="collapse list-unstyled" id="outputSubmenu"> <li> <a href="output/output.html">Expected Output</a> </li> <li> <a href="output/output.html">Interpretation of the Results</a> </li> <li> <a href="output/output.html">Variations of Implementation</a> </li> </ul> </li> <li> <a href="flags/flags.html">Comparing Flags</a> </li> <li> <a href="flags/flags.html#error">Error Codes</a> </li> <li> <a href="contact/contact.html">Contact</a> </li> </ul> </nav> <div class="container-flex d-flex content" style="width: 40%"> <div class="col">  <div class="cont"> <h1>Usage & Implementation</h1> <h3>Web Interface</h3> <p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p> </div> </div> </div> <div class="container-flex d-flex content" style="width: 40%"> <div class="col bg-dark">  <h2 class="codep">Code Preview</h2> <div class="neapolitan"/> <div class="code"> <code> this is code </code> </div> </div> </div> </div> </div> </body> </html>

CSS:

/* DEMO STYLE */ @import "fonts.googleapis/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { background: #fff; border: none; border-radius: 0; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } .stay-open {display:block !important;} .codep { color: #f0ad4e; padding-top: 10px; padding-bottom: 10px; } .code { padding-top: 20px; padding-left: 3px; } .neapolitan { background:red; position:relative; height:1px; content:''; background:gray; width:100%; } .cont{ padding-top: 10px; } .cont h3 h2 h6{ padding-top: 20px; } .cont p{ color: #696969; font-size: 14px; } .label-default { background-color: #777; } .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .cont li { font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1.7em; color: #696969; font-size: 14px; padding-bottom: 10px; } .cont ul{ padding-left: 40px; } .cont b{ } .ind{ } .cont-t{ font-size: 11px; } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ #sidebar { min-width: 250px; max-width: 250px; background: #343a40; color: #fff; transition: all 0.3s; } #sidebar.active { margin-left: -250px; } #sidebar ulponents { } #sidebar ul p { color: #fff; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #343a40; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #f0ad4e; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #292b2c; } .content { height: 1000px; } .linknav { padding-left: 72px; } .linknav a{ display:inline; margin-right:1.5em; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #sidebarCollapse span { display: none; } }

推荐答案

$('#codeSection').scroll(function(){ ($('#previewCode').text($('#codeSection').text()).css('color','white')); });

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script defer src="use.fontawesome/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="use.fontawesome/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>  <link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  <link href="css/style.css" rel="stylesheet"> <link rel="stylesheet" href="lib/style.css"> <script src="lib/script.js"></script> <title>Hello, world!</title> </head> <body> <script src="code.jquery/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="container-flex">  <nav class="navbar navbar-expand-lg navbar-light bg-dark"> <a class="navbar-brand" href="index.html">IP Intelligence</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="input/input.html">Input</a> </li> <li class="nav-item"> <a class="nav-link" href="output/output.html">Output</a> </li> <li class="nav-item"> <a class="nav-link" href="flags/flags.html">Flags</a> </li> <li class="nav-item"> <a class="nav-link" href="flags/flags.html#error">Error Codes</a> </li> <li class="nav-item"> <a class="nav-link" href="contact/contact.html">Contact</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </div> <div id="wrapper"> <div class="container-fluid"> <div class="row justify-content-between">  <nav class="" id="sidebar"> <ul class="list-unstyled components"> <li class="active"> <a href="index.html">Home</a> </li> <li> <a href="#inputSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Input</a> <ul class="collapse list-unstyled" id="inputSubmenu"> <li> <a href="input/input.html">Input</a> </li> <li> <a href="input/input.html">Optional Input Settings</a> </li> </ul> </li> <li> <a href="#outputSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Output</a> <ul class="collapse list-unstyled" id="outputSubmenu"> <li> <a href="output/output.html">Expected Output</a> </li> <li> <a href="output/output.html">Interpretation of the Results</a> </li> <li> <a href="output/output.html">Variations of Implementation</a> </li> </ul> </li> <li> <a href="flags/flags.html">Comparing Flags</a> </li> <li> <a href="flags/flags.html#error">Error Codes</a> </li> <li> <a href="contact/contact.html">Contact</a> </li> </ul> </nav> <div class="container-flex d-flex content" style="width: 40%; height:120px"> <div class="col">  <div class="cont" id="codeSection" style="overflow:scroll;height:250px"> <h1>Usage & Implementation</h1> <h3>Web Interface</h3> <p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p> </div> </div> </div> <div class="container-flex d-flex content" style="width: 40%"> <div class="col bg-dark">  <h2 class="codep">Code Preview</h2> <div class="neapolitan"/> <div id='previewCode' class="code"> <code> this is code </code> </div> </div> </div> </div> </div> </body> </html>

使用jquery的滚动功能 api.jquery/scroll/.一旦您使用代码部分滚动div，就会触发此操作. 为了使本示例正常工作，我在代码段中添加了一个ID，并且还进行了一些更改以使代码段div可滚动. (有关滚动消息，请参见控制台).

use jquery's scroll function api.jquery/scroll/. this will trigger once you scroll your div with the code section. for this example to work i have added an id to code section and also have done some alteration to make codesection div scrollable. (see console for message on scroll).

因此，在滚动时，您还可以检查页面偏移，并可以根据需要将值设置为预览屏幕.

so on scroll you can also check page offset and can set value to preview screen as needed..

更多推荐

Bootstrap 4,根据我们在第一列上滚动的位置,更改第二列的内容