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

标签 html css bootstrap-4 multiple-columns

我在一行中有 2 列，一列用于主要内容，第二列用于该主要内容的代码预览，我想做的是第二列会在我滚动时切换我设置的内容到第一列的特定部分。此代码中的第一列是应该包含内容的白色列，而黑色列是应该显示代码的位置，具体取决于您在白色列上的位置

编辑代码:

HTML:

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <div class="container-flex">
        <!-- navbar top-->
                  <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">
        <!-- Sidebar -->
            <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">
            <!--main page-->
            <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">
              <!--Code Editor-->
              <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 "https://fonts.googleapis.com/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 ul.components {
}

#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>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <div class="container-flex">
        <!-- navbar top-->
                  <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">
        <!-- Sidebar -->
            <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">
            <!--main page-->
            <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">
              <!--Code Editor-->
              <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的滚动功能https://api.jquery.com/scroll/ .一旦您使用代码部分滚动 div，这将触发。 为了使这个示例起作用，我在代码部分添加了一个 id，并且还做了一些更改以使代码部分 div 可滚动。 (有关滚动消息，请参阅控制台)。

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

关于html - Bootstrap 4，根据我们在第一列上滚动的位置更改第二列内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54995463/

上一篇：Jquery 切换混淆了引导卡过滤的对齐方式

下一篇：html - 如果元素包含带有类的特定 div，如何隐藏元素

相关文章：

javascript - 如何组织css和js文件的缩小和打包以加快网站速度？

css - 为什么这个元素向后动画？

css - Bootstrap 按钮显示蓝色边框？

html - 在表格中调整 TD 的大小

javascript - Bootstrap 将元素一个接一个地放置

javascript - 单击特定按钮显示导航

javascript - 如何通过按钮删除数据

javascript - 使用 JavaScript 模糊图像

javascript:鼠标悬停用于背景着色和不透明度

javascript - 使用 CORS 和 javascript 将 xhtml 文件加载到 div 元素

©2024 IT工具网  联系我们