html - 固定菜单不起作用

coder 2023-08-06 原文

我希望我的菜单在我滚动时保持在原位，但是当我在我的 CSSposition:fixed; 中添加以下内容时，整个事情都偏离了我想要的位置是。

在此jsfiddle您可以看到它现在的样子以及我希望它成为的样子。唯一的问题是，如果我将位置更改为固定位置，它就不会再停留在我想要的位置。

<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <title>random</title>
  <!--   <link rel="stylesheet" type="text/css" href="styles/style.css"> -->

</head>

<body>
    <div id="container">
        <div id="headcontainer">
        </div>
               <div id="menu">
                <div id="logo">
                    <p>
                        Hier komt een logo
                    </p>
                </div>
                <ul>
                    <li>
                        Home
                    </li>
                    <li>
                        Over
                    </li>
                    <li>
                        Contact
                    </li>
                    <li>
                        Producte
                    </li>
                </ul>
            </div>

<div id="content">
<div class="text-box">


    </div>
    <div class="text-box">


    </div>
</div>

    </div>
</body>

</html>

<style>
    /*Global*/

    * {
        margin: 0px;
    }

    body {}

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {}

    h1 {}

    h2 {}

    h3 {}

    h4 {}

    a {}

    img {}

    #container {
        margin-left: auto;
        margin-right: auto;
        width: 100%;

    }

    #headcontainer {
        width: 100%;
        height: 100vh;
        background-color: pink;

    }
    /* navigation */

    #menu {
        height: 100px;
        width: 100%;
        background-color: rgba(0, 0, 255, 0.1);
        max-height: 100px;
        border: 1px solid black;
        border-top: none;


    }

    #menu li {
        display: inline-block;
        text-decoration: none;
        padding-left: 20px;
        position: relative;
        padding-right: 20px;
    }

    #menu ul {
        float:right;
        height:100%;
        width: auto;
        line-height: 100px;
        margin-right:25px;
    }

    #menu ul li {

    }

    #menu ul li:hover {
        cursor:pointer;
        color: white;
    }

    #logo {
        height: 50px;
        width: auto;
        background-color: red;
        float: left;
        margin-top: 0px;
        margin-top: 30px;
        margin-left: 60px;


    }

    /*content*/
    #content {
    width:100%;
    height:1000px;
    min-height:500px;
    margin-left: auto;
    margin-right: auto;


    }

    .text-box {
    width:40%;
    height:auto;
    background-color:blue;
    min-height:100px;
    float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
    }

    </style>

编辑: 我正在努力实现这样的目标:

http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html

最佳答案

好的，我知道你想要什么，我想你会用 Javascript 编写这个行为。

这种解决方案对您来说没问题吗？？

演示:http://jsfiddle.net/cc48t

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
         $('#scroller').css('top', $(window).scrollTop());
    }
}
);

关于html - 固定菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37610457/

html 固定 gt lt margin css

有关html - 固定菜单不起作用的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
ruby - 在 Ruby 中将整数格式化为固定长度的字符串 - 2
有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的
ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315
ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用？ - 2
我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么？describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。关于ruby-o

html - 固定菜单不起作用

有关html - 固定菜单不起作用的更多相关文章

随机推荐