javascript - 输入显示在我的固定标题中

标签 javascript jquery html css canvas

我在正文页面中有一个,但是当我在页面中滚动时我想要一个固定的标题......我尝试了更多选项但总是在固定标题中显示输入,我用 Z-Index 证明但我不能之后移动 slider

这是一个例子... IMAGE

我想要一个带有 Canvas 及其背景的固定栏,当在页面上滚动时,这个栏固定在顶部...

...

HTML:

<body style=" background-color:black;">
    <section id="headerHtml">
        <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    </section>
<section id="bodyHtml" >
 .....
</selection>
</body>

J查询:

$(document).ready(function() {    
    var div = $('#headerHtml');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '10px' : '');

    });    
});

和 CSS:

#headerHtml{
    background-image:url('fondo_nou.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding:5px 20px;
}

谢谢!!

对不起我的英语...我使用了谷歌翻译:)

最佳答案

我使用了 Bootstrap NavBar 来解决这个问题,代码是:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <section id="headerHtml" style="background-color: black">
        <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    </section>
</nav>

关于javascript - 输入显示在我的固定标题中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24427632/

相关文章:

html - 绝对位置在不同浏览器中显示不同

javascript - 使用没有 session 或 cookie 数据的 iFrame(隐身)

javascript - 当我使用 Javascript 向下滚动时,我可以逐像素更改元素的宽度或任何其他样式吗?

javascript - 如何使用正则表达式将相同的模式文本替换为空白?

jquery - 关闭jquery模态对话框很慢

javascript - 如何提交具有特定字段集的表单

javascript - 可点击的 html 表格单元格

javascript - 使用 Javascript 将 URL 参数传递给 href 链接

jquery - 如何将字符串列表发布到 GAE

jquery - 如何使用星号之类的 Bootstrap 图标来给星级评分?