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

问题描述 投票：0回答：1

我在一行中有两列，一列是主内容，第二列是主要内容的代码预览，我想要做的是第二列将我设置的内容切换到一次我向下滚动到特定内容第一栏的一部分。此代码中的第一列是白色的，其中内容是，并且暗列是代码应该显示的位置取决于您在白色列的位置

编辑代码：

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;
    }
}
html5 css3 bootstrap-4 multiple-columns
1个回答
0
投票

$('#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到代码部分，也做了一些改动，使codesection div可滚动。 （有关滚动消息，请参阅控制台）。

所以在滚动时你也可以检查页面偏移量，并可以根据需要设置值到预览屏幕。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.