使用顶部固定菜单滚动时背景消失

Question

我有一个关于滚动时固定在页面顶部的菜单的问题。

在这个页面中，我使用的是比父div更宽的子div：我是从link开始的。

滚动时

菜单固定得​​很好，但问题是当我开始时，图像背景（蓝色＆＃34;云＆＃34;在中心）进入子div（100％宽度的水平黑条）消失向下滚动，我的意思是一旦菜单出现在页面顶部。

我不知道如何规避这个问题。

如果有人能看出错误，

由于

更新：

我尝试了你的解决方案，但它似乎没有用。也许我的问题没有得到很好的理解，这就是为什么我把2个屏幕截图说明问题：

一开始，我有以下页面顶部：

当我开始向下滚动时，我得到：

我希望＆＃34;蓝云＆＃34;图像不会消失。

Answer 1

检查更新后的fiddle

 $(document).ready(function() {

    $(window).scroll(function () {
        //if you hard code, then use console
        //.log to determine when you want the 
        //nav bar to stick.  
        //console.log($(window).scrollTop())
        if ($(window).scrollTop() > 115) {
        $('.horizontal_center').addClass('navbar-fixed');
        }
        if ($(window).scrollTop() < 115) {
        $('.horizontal_center').removeClass('navbar-fixed');
        }
        });
    });

Answer 2

只需更改下面的CSS

div.horizontal_column {
  background-image: url("../images_template/header2_bg.jpg");
  border-color: #000000;
  border-style: solid;
  border-width: 15px 0 0;
  display: table-cell;
  height: 150px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  right: 0;
  vertical-align: top;
  width: 100%;
  z-index: 9999;
}

仅Z-index：9999