-2

I have an issue about a menu which is fixed at the top of page when I am scrolling.

In this page, I am using a child div which is wider than the parent div : I do it from this link.

menu is well fixed when scrolling but the problem is that image background (the blue "cloud" at the center) into the child div (the horizontal black bar of 100% width) disappears when I start to scroll down, I mean once the menu appears at the top of page.

I don't know how to circumvent this problem.

If someone could see what's wrong,

Thanks

UPDATE :

I tried your solutions but it doesn't seem to work . Maybe my issue is not well understood, that's why I put 2 screenshot illustrating the problem :

At the beginning, I have the following top of page :

starting situation

When I start to scroll down, I get :

image disappeared

I would like that "blue cloud" image not to disappear.

Community
  • 1
  • 1
  • can you share a fiddle? – gurvinder372 Jan 12 '16 at 06:13
  • after getting sticky header..you can do when class is navbar-fixed `background-color:black;background-image:none` in that – Dhara Jan 12 '16 at 07:33
  • *Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve]. * – BSMP Jan 12 '16 at 15:22

2 Answers2

1

Check the updated 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');
        }
        });
    });
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • thanks for your response but I don't want that horizontal_column to be fixed, I just want only the " –  Jan 12 '16 at 06:35
  • Sorry for the delay, you can test my problem on https://jsfiddle.net/ysis81/71ndoe0p/ –  Jan 12 '16 at 08:42
  • @user1773603 is it not already working? header is sticking to the top when you scroll down on my browser here – gurvinder372 Jan 12 '16 at 08:43
  • yes but when you begin to scroll down, the "blue cloud" under nav_bar disappears, that's what I indicate above on the second screenshot. –  Jan 12 '16 at 08:53
  • thanks for your help. Maybe I have not expressed clearly my issue : there are the nav_bar menu which has the background "header_bg_min.jpg" and on the other hand, the "header_bg.jpg" background for horizontal_center container. I would like to have nav_bar fixed when I start scrolling and having "header_bg_min.jpg" not to disappear once this nav_bar is displayed. –  Jan 12 '16 at 09:43
  • look at http://jsfiddle.net/71ndoe0p/1/ and more precisely when the nav_bar is going to appear, you can notice that header_bg_min.jpg is disappearing. –  Jan 12 '16 at 09:47
  • @user1773603 `when the nav_bar is going to appear, you can notice that header_bg_min.jpg is disappearing` it is not happening on my browser here. which browser/version you are testing on? – gurvinder372 Jan 13 '16 at 05:32
0

Just change below 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;
}

only Z-index : 9999

Dhaval Patel
  • 1,076
  • 6
  • 19
  • Thanks for this answer, it works ! Could you tell me please briefly how this "z-index: 9999" prevents the occultation of navbar ? at first sight, I would have thought to put "z-index: 9999" to navbar-fixed instead. –  Jan 14 '16 at 01:50