javascript - 修复没有 **position:fixed** 的图像位置

问题描述

我有一个 SideMenu 栏。侧边菜单的标题包含一个图像，下面是内容。它是可滚动的。我想让菜单可滚动而不是图像。我不能使用position:fixed因为它是一个可折叠的菜单和其他一些原因。我怎样才能只使内容可滚动？

代码

document.write('<div> <img style="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');

document.write('<div class="scroll">'+

document.write(
    '<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
    '<div class="show list-unstyled" id="X1">'+
       '<a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Site 1 </a> '+
       '<a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Site 2 </a> '+
    '</div>'
);
document.write('</div>');

我尝试放置单独的 DIV 但不起作用

CSS

.scroll {
  max-height: 500px;
  overflow-y: scroll;
  background: #000000;
}

#sidebar {
  min-width: 210px;
  max-width: 210px;
  background: #000000;
  color: #fff;
  transition: all 0.3s;
}

完整代码

#sidebar {
  min-width: 210px;
  max-width: 210px;
  background: #000000;
  color: #fff;
  transition: all 0.3s;
}


#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar.active , button div a {
  padding-left: 30px;
  margin-left: 0;
  font-size: 0.9em;
  font-family: Verdana;
  background: #ffffff;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}
#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 0;
  background: #000000;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Collapsible sidebar using Bootstrap 4</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style.css">
  <!-- <link rel="stylesheet" type="text/css" href="CSS/Tags.css">
  <link rel="stylesheet" type="text/css" href="CSS/Nav.css">
  <link rel="stylesheet" type="text/css" href="CSS/Card.css"> -->
  <!-- <link rel="stylesheet" type="text/css" href="CSS/Buttons.css"> -->
  <!-- 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>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <div class="wrapper">

      <nav id="sidebar">
        <script src="C-NavigationBar.js"></script>
        <script src="JavaScript/ace.js" type="text/javascript" charset="utf-8"></script>
        <script>

           var y = document.getElementById(1);
           y.className += " w3-show";
           y.previousElementSibling.className += " w3-theme ";

              function myAccFunc(n) {
                var x = document.getElementById(n);
                if (x.className.indexOf("w3-show") == -1) {
                  x.className += " w3-show";
                  x.previousElementSibling.className += " w3-theme ";
                } else {
                  x.className = x.className.replace(" w3-show", "");
                  x.previousElementSibling.className =
                  x.previousElementSibling.className.replace("w3-theme", "");
                }
              }

              var editor = ace.edit("editor");
              editor.setTheme("ace/theme/twilight");
              editor.session.setMode("ace/mode/c_cpp");
              editor.setReadOnly(true);
              editor.resize();
        </script>
      </nav>


      <div id="content">

          <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">

                  <button style="width:auto;"type="button" id="sidebarCollapse" class="btn btn-dark">
                      <i class="fas fa-align-justify"></i>
                      <span>Menu</span>
                  </button>



              </div>
          </nav>



      </div>
  </div>

  <!-- jQuery CDN - Slim version (=without AJAX) -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  <script type="text/javascript">
      $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
              $('#sidebar').toggleClass('active');
          });
      });
  </script>
  </body>

</html>

编辑

var myArray = [

  ["Site1.php", 0],
  ["Site1.php", 0],
];

var X = window.location.href.substring(window.location.href.lastIndexOf("/")+1);
var i;
for (i = 0; i < myArray .length; i++) {
 if (X == myArray [i][0]) {
   myArray [i][1] = 'active';
 break;
}
}
function Previous() {
  window.location.href = myArray [i-1][0];
}
function Next() {
  window.location.href = myArray [i+1][0];
 }

document.write('<div> <img 
class="header"tyle="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');

document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="show list-unstyled" id="X1">'+
  '<a href="'+myArray [0][0]+'" class="'+myArray [0][1]+'" > 1 </a> '+
  '<a href="'+myArray [1][0]+'" class="'+myArray [1][1]+'" > 2</a> '+
'</div>'

);

标签： javascripthtmlcssscroll

javascript - 修复没有 position:fixed 的图像位置

问题描述

解决方案

推荐阅读