"jumping" content in navbar in bootstrap

Question

Edit2: Okay, the problem was, that I used a <div class="row"> around the <div class="topimage"> tag. Strange. Could someone explain why it is?

---

I'm pretty new to bootstrap and created a web page for learning purposes. Everything is working pretty well so far, except the navbar.

This is my nav code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headertest ">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-sm-4  col-sm-offset-1">
                    <form class="navbar-form navbar-left">
                        <button class="btn btn-default">ENTDECKEN</button>
                        <button class="btn btn-default">FINDEN</button>
                        <button class="btn btn-default">PLANEN</button>
                        <p class="font">
                            <b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
                        </p>
                    </form>
                </div>
                <div class="col-sm-2 ">
                    <div class="navbar-form">
                        <img src="../assets/aida.png" class="logo ">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="navbar-form navbar-right">
                        <form action="#" style>
                            <div class="dropdown">
                                <img src="../assets/lupe.png" class="icons" />
                                <img src="../assets/telefon.png" class="icons" />
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="#">Erste Aktion</a></li>
                                    <li><a href="#">Zweite Aktion</a></li>
                                    <li><a href="#">Noch eine Aktion</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Ein Link</a></li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

The problem is, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll. Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.

Normal and scrolling up:

Scrolling down:

I hope you can see what I mean.

Does anybody know what I'm doing wrong? (my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")

Thank you

Edit:

I have an image as the first item (after the navbar) that seems to cause the problems. If I delete it, the navbar is working as expected.

Css:

.topimage{
  height: 600px;
  width: 100%;
  align-self: center;
  background-image: url("./assets/testbild3.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;

}

and how I implemented it:

<div class="row">
   <headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
   <div class="topimage">
   </div>
</div> 

The fiddler link: (where it works without "jumping" navbar content) https://jsfiddle.net/Biberium/g52cd6v8/