Javascript 不带**位置的图像固定位置：固定**_Javascript_Html_Css_Scroll

Javascript 不带**位置的图像固定位置：固定**

javascript html css scroll

Javascript 不带**位置的图像固定位置：固定**,javascript,html,css,scroll,Javascript,Html,Css,Scroll,我有一个侧菜单栏。侧菜单的标题包含一个图像，下面是内容。它是可滚动的。我想让菜单滚动，而不是图像。我不能使用position:fixed，因为它是一个可折叠的菜单，还有其他一些原因。我怎样才能使内容只可滚动代码完整代码 #sidebar { min-width: 210px; max-width: 210px; background: #000000; color: #fff; transition: all 0.3s; } #sidebar.active { m

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

代码

完整代码

#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>


使用Bootstrap 4的可折叠侧边栏
var y=document.getElementById（1）；
y、 className+=“w3显示”；
y、 previousElementSibling.className+=“w3主题”；
函数myAccFunc（n）{
var x=document.getElementById（n）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
x、 previousElementSibling.className+=“w3主题”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
x、 previousElementSibling.className=
x、 previousElementSibling.className.replace（“w3主题”，“w3主题”）；
}
}
变量编辑器=ace.edit（“编辑器”）；
编辑：setTheme（“ace/theme/twilight”）；
editor.session.setMode（“ace/mode/c_-cpp”）；
editor.setReadOnly（true）；
editor.resize（）；
菜单
$（文档）.ready（函数（）{
$（'sidebarCollapse'）。在（'click'，函数（）{
$（“#边栏”）.toggleClass（'active'）；
});
});

编辑

var myArray=[
[“Site1.php”，0]，
[“Site1.php”，0]，
];
var X=window.location.href.substring（window.location.href.lastIndexOf（“/”）+1）；
var i；
对于（i=0；i”）；
document.write(
“家”+
''+
' '+
' '+
''

))

我建议您使用Jquery实现您想要的功能

首先，使位置：固定

但正如你所说，我不能固定位置，因为菜单是可折叠的。现在jquery开始发挥作用

在编写“collapse”函数的地方，再添加一行jquery代码以隐藏标题图像

当折叠菜单再次显示时，必须再次使用jquery使标题图像可见

当所有的门都关上时，聪明地创建自己的门。

我建议您使用Jquery来实现您想要的

首先，使位置：固定

但正如你所说，我不能固定位置，因为菜单是可折叠的。现在jquery开始发挥作用

在编写“collapse”函数的地方，再添加一行jquery代码以隐藏标题图像

当折叠菜单再次显示时，必须再次使用jquery使标题图像可见

当所有的门都关上时，聪明地创建自己的门。

在修复或复制问题之前，我收到了这个错误。我需要解决以下错误。因此，如果你可以请附加的代码文件将是伟大的。

在修复或复制问题之前，我会收到此错误。我需要解决以下错误。因此，如果你可以请附加的代码文件将是伟大的。

不知道“不工作”在这里意味着什么，但这几乎就是创建可滚动元素的方式。请显示呈现的HTML，以便我们可以重现您的问题，并解释什么是“不工作”的意思。我希望图像是固定的，而不是滚动。我尝试的方法要么是在基于浏览器的网站上修复图像（我不想要），要么是使用菜单@TeemuLike滚动，显示侧栏的完整HTML和CSS代码，没有JS！请提供@Teemu在此处所说的完整代码，我很抱歉。查看edit please@JimilNo线索这里的“不工作”是什么意思，但这几乎就是创建可滚动元素的方式。请显示呈现的HTML，以便我们可以重现您的问题，并解释什么是“不工作”的意思。我希望图像是固定的，而不是滚动。我尝试的方法要么是在基于浏览器的网站上修复图像（我不想要），要么是使用菜单@TeemuLike滚动，显示侧栏的完整HTML和CSS代码，没有JS！请提供@Teemu在此处所说的完整代码，我很抱歉。查看编辑请@JimilImage在整个窗口中固定的位置不能折叠，导航栏中固定的图像随菜单滚动。那么它是如何实现的呢？除了折叠之外，您还可以使用jquery fadeIn（）或fadeOut（）函数隐藏菜单。它看起来像一个崩溃。您的整个菜单（包括图像）将被隐藏。固定在整个窗口中的图像位置无法折叠，导航栏中固定的图像将随菜单一起滚动。那么它是如何实现的呢？除了折叠之外，您还可以使用jquery fadeIn（）或fadeOut（）函数隐藏菜单。它看起来像一个崩溃。您的整个菜单（包括图像）将被隐藏；y、 className+=“w3显示”；y、 previousElementSibling.className+=“w3主题”；函数myAccFunc（n）{var x=document.getElementById（n）；if（x.className.indexOf（“w3-show”）=-1{x.className+=“w3-show”；x.previousElementSibling.className+=“w3-theme”；}否则{x.className=x.className.replace（“w3-show”，“”）；x.previousElementSibling.className=x.previousElementSibling.className.className.replace(“w3主题”，“”）；}}它存在于HTML文件的JS部分中。删除

#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>'